一文搞懂CSS line-height和vertical-align( 二 ) _CSS

文章插图
现在我们在浏览器端设置span标签的字体大小为0，效果如下：

文章插图
我们看到，div依然和上面显示span标签时撑开了相同的高度，这是由于div自己的字体大小是100px，不论其中是不是直接写了文字，div里的图片也会有基线对齐的情况，不过图片是以其底边和父元素里的x底边对齐。
只有当我们把div的字体设置为0时，才能解决这个问题：

文章插图
二、line-height和vertical-align
2.1 line-height
上面我们学习了行框盒子，line-height就是来设置每行之间的距离。
首先大家要明确，因为行框盒子是存在于块状元素当中，所以这个行高属性line-height也是给块元素设置的。注意：line-height具有继承性，其后代的块状元素都会继承该属性。
格式：line-height:value
value取值：
（1）normal，默认值。不设置此属性的时，是通过浏览器自动去计算。
（2）length，长度。使用指定长度作为行高值。单位px，em等。
（3）number，数值。此时表示设置为当前字体大小的number倍的值。大多数情况下，这是设置line-height的推荐方法，不会在继承时产生不确定的结果。
（4）%，百分比。该值是相对于当前字体尺寸的百分比来设置间距。
（5）inherit 。从父元素继承line-height属性的值。我们知道line-height本身就具有继承性，为何还有有这个继承的属性值呢？这个属性值是针对如input标签这种有自己样式的标签使用的，如input标签的line-height值默认是normal，不会从父元素继承，而希望该值和父元素的行高一致就需要设置为该属性值。举例如下：
这是没有设置该属性时的默认效果：

文章插图
这是line-heigh设置为inherit的效果：

文章插图
应用举例：
（1）在没有设置块状元素高度的时候，其高度是由line-height决定的。
①line-height值不为0时，代码如下：
<style>
#box1 {
width: 200px;
line-height: 50px;
background-color: gold;
border: 1px solid black;
}
</style>
<div id="box1">看看div高度</div>
此时的div高度为50px，如下图：

文章插图
②line-height值为0时，代码如下：
<style>
#box1 {
width: 200px;
line-height: 0;
background-color: gold;
border: 1px solid black;
}
</style>
<div id="box1">看看div高度</div>
此时div高度为0，如下图：

文章插图
（2）line-height可以让内联元素近似居中（适用于当line-heigh大于内联元素自身高度的情况）。
我们来看以下代码：
<style>
body {
background-color: gold;
}
#box {
width: 1200px;
padding: 0 50px;
font-size: 80px;
line-height: 150px;
background-color: black;
}
span {
background-color: yellowgreen;
}
</style>
<div id="box">
<span>中文aljx</span>
</div>
显示效果如下：

文章插图
我们可以看到①②的高度是一致的，所以此时span标签位置在div中是正好居中的，但是由于CSS字体在设计的时候不会正好占据内联盒子内容区的1/2处，一般来说会有一些下沉，所以文字显示效果是近似居中的。
2.2 vertical-align
上面讲到的幽灵节点，我们知道了一个默认基线对齐的现象，那我们要如何消除幽灵节点的影响呢，设置vertical-align属性，来调整内联盒子在一行中垂直怎么对齐，就是一个解决方案。注意，这个属性是设置给需要修改对齐方式的行内/行内块元素的。
格式：vertical-align:value
value取值：
* baseline（基线），默认值。基线是内联盒子中小写字母的x的下边缘的一条线与和父元素的x下边缘线对齐。
* middle，元素的垂直中心点和父元素的x的1/2处对齐。
* bottom，内联盒子的底部和行框的底部对齐。
* top，内联盒子的顶部和行框的顶部对齐。