浅谈css中vertical-align和line-height的用法

作者：佚名字体：[增加减小] 来源：互联网时间：2017-08-06

本文主要包含css,vertical-align,line-height等相关知识,佚名希望在学习及工作中可以帮助到您

（1）、将一个图片放入一个div块中，div块背景颜色设置为aquamarine。将会发现图片与div块下边沿有一定间隙。

实例：

　　　　　

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css中vertical-align和line-height的用法</title>
<style>
*{
margin: 0px;
padding: 0px;
}
div{
background-color: aquamarine;
}
img {
width: 300px;
}
</style>
</head>
<body>
<div>
<img src="./131796750659172.jpg" alt="picture">
</div>
</body>
</html>

（2）、在div块的图片后面放入一个span标签，内容为xxxx!,会发现span标签内的元素与图片是在底线对其的，当给span加一个背景时，可以看到图片底部是与字母x底部对齐的。

实例：
　　

实例：放大之后可以很明显的看出来！

　　　　　　

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css中vertical-align和line-height的用法</title>
<style>
*{
margin: 0px;
padding: 0px;
}
div{
background-color: aquamarine;
}
img{
width: 300px;
}
span{

您可能想查找下面的文章:

相关文章

2017-08-06CSS学习之三字体使用说明
2017-08-06css(html)背景图优化合并技巧详解
2017-08-06Li list-style-image 图片垂直居中
2017-08-06四种css 伪类选择器
2017-08-06CSS中基代码base.css一览
2017-08-06DIV多层嵌套margin-top的BUG问题
2017-08-06用CSS设置表格Table的细边框的比较好用的方法
2017-08-06CSS 控制Html页面高度导致抖动问题的原因
2017-08-06CSS伪类与CSS伪元素的区别及由来具体说明
2017-08-06基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享