本文详细探讨了CSS中line-height属性的作用机制，解释了它如何影响非替换元素的纯内联元素可视高度，以及它是如何独立于font-size，通过调整行距来控制文本排版的。文中还分析了em-box和内容区域的概念，以及它们与字体样式和大小的关系。
line-height属性指的是行的基线之间的距离（《css权威指南》）
默认空div高度是0，但是一旦写上几个文字，高度就有了，这个高度由何而来？
表面上看，是有font-size决定的，但是本质上，是由line-height全权决定的，与font-size大小无关。
对于非替换元素的纯内联元素，其可视高度完全由line-height属性决定
（注意这里面的完全，即padding，border属性对于可视高度无任何影响）
对于文本这样的纯内联元素，line-height是高度计算的基石：指定了用来计算行框盒子的基础高度。
比如说，line-height设为16px，第一行16，2行就是32，以此类推。
通常，line-height的高度作用的细节都是使用 行距和半行距来解释的
内联元素的高度由固定高度和不固定高度组成，这个不固定的部分就是行距，line-height之所以起作用，就是通过改变行距实现的。
联想一下文字排版，如果不改变字体字号，增加行距，也会占更多的篇幅。
css中的行距分散在当前文字的上方和下方，即使是第一行文字，其上方也是有行距的，只不过这个行距的高度仅仅是完整行距高度的一半，因此也称为半行距。
行距=行高-embox；转化成css语言就是
行距=（line-height）减去fontsize
em-box 其高度正好就是1em，em是一个相对font-size大小的css单位，1em等于当前一个font-size大小；
文字图形区域是embox的范围嘛？
不是的，比如说一些带尾巴的英文字符（q或者g）其小尾巴在em-box范围之外，对于汉字，很多字体图形实际上小于em-box的高度。
内容区域出马：
大多数情况下，内容区域和em-box不一样，
1.内容区域高度受font-family和font-size共同影响，
2.而em-box仅受font-size影响，通常是内容区域更高一些。
但是字体是宋体的时候，这两个东西是相同的
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
