CSS - line-height

参考博客：css行高line-height的一些深入理解及应用、深入理解CSS中的行高

line-height，中文意思为“行高”，指的是文本中行与行基线之间的距离

基线在哪运用？

inline-block模型中，元素水平对齐方式的方式——基线对齐，每个元素都有自己的行高与基线，以哪个元素作为参考标准，答案是以行高最大的元素作为参考标准

谁撑起了元素的高度？

误区一：div的高度是由文本大小撑起的。一个标签没有定义height属性(包括百分比高度)，那么其最终表现的高度一定是由line-height起作用

举例证明

.test1{font-size:20px; line-height:0; border:1px solid #cccccc; background:#eeeeee;}
<div class="test1">测试</div>

可以看出，test1设置了字体大小，但是行高设置为零，导致div没有高度。

.test2{font-size:0; line-height:20px; border:1px solid #cccccc; background:#eeeeee;}
<div class="test2">测试</div>

test2没有设置字体大小，但是设置了行高，div的高度被撑起了

什么是line boxes高度？

以下是张鑫旭老师博客中的解释

使用line-height达到垂直居中的原理是什么？

以下是张鑫旭老师博客中的解释