彻底搞懂CSS行高line-height的奥秘

行高： 两行文字“基线”之间的垂直距离

基线并不是汉字的下端沿，而是英文字母"x"的下端沿

行距： 一行“底线”至下一行“顶线"的垂直距离

行间距： 行高 - 字体大小

行内框：高度就是行高，在没有其他因素（padding）影响的时候，行内框等于内容区域

行框：本行内所有元素中行高最大的值

元素对行高的影响

对于行内元素如em、strong、span和等，其padding、margin、border-top、border-bottom 不会增加行高。padding会覆盖；margin将重置为0；border-top和border-bottom同样会覆盖。padding-left、padding-right、border-left和border-right可用。

img元素会影响行高

---

css中起高度作用的是 height和line-height

div.test{font-size:20px; line-height:0; background:#eee} // 高度为0

div.test2{ font-size:0; line-height:20px; background:#eee} // div高度为20pxml代码：

证明撑开div高度的是line-height而不是font-size

行内盒子模型

内联盒子/匿名内联盒子inline-boxes

行框盒子line-boxes  每一行就是一个“行框盒子”，每“行框盒子”由一个个“内联盒子组成”

包含盒子containing-box，由一行行的“行框盒子”组成

内容区域content-area，一种围绕文字看不见的盒子，大小与font-size大小有关

---

行高特性

1.行高的垂直居中性

、、在单行或多行或图片垂直居中实现上的应用

单行文字的垂直居中对齐：line-height值设置为height一样大小的值可以实现单行文字的垂直居中；height值可以省略

多行文字的垂直居中对齐：要实现高度不固定的文字垂直居中使用padding就好了。对于高度固定的div，里面文字单行或多行显示，字体大小有大有小的情况怎么办呢？方法之一就是借助于line-height。

.line{line-height:150px; border:1px dashed #cccccc; padding-left:5px;}

.line span{display:-moz-inline-stack; display:inline-block; line-height:1.4em; vertical-align:middle;}

.line i{width:0; display:-moz-inline-stack; display:inline-block; vertical-align:middle; font-size:0;}

<p class="line">

        <span style="font-size:12px"> 这里是高度为150像素的标签内的多行文字，文字大小为12像素。<br/>这里是第二行，用来测试多行的显示效果。</span><i></i>

</p>

、、图片的垂直居中

类似上面处理的方法，借助 i标签或伪元素

、、使用缩放因子

line-height:150% // 先计算值，再继承下去

line-height:1.5 // 缩放因子 ，先继承，后计算值

---

---