熬夜整理了一万多字的line-height总结,你还看不懂那我真的要跪了!
作者：极客小俊
我不用拼过聪明人，我只需要拼过那些懒人 我就一定会超越大部分人!
line-height 属性及原理完全详解
概念: 行高指的是文本行的基线之间的距离, 更简单来说行高是指文本行基线间的垂直距离, 行高也是文字大小与行距的和, 行高越大则行间距越大!
注意：line-height属性不允许使用负值。
但是很多人就只是知道 line-height属性用于设置行高, 而行高到底是一个什么东西并不是很清楚!
那么在了解行高之前,我们就必须要先掌握这几个概念: 顶线、中线、基线、底线、x-height、ex、内联盒模型、行距等..
知道这些概念之后才能真正的去理解line-height属性的意义!
那现在我们就来看一张文字在网页中的结构图:
从上到下四条线分别是顶线(绿色)、中线(蓝色)、基线(红色)、底线(紫色)
图中黄颜色的线位置表示: 行间距 其实是分为上一行文字的下半行距 和 下一行文字的上半行距, 这里要是听不懂 没关系 我们接下来会慢慢说半行距的意义!
小提示: 之后我们要讲到的vertical-align css属性中有top、middle、baseline、bottom，就是和这四条线相关!
什么是基线?
要了解基线 那么还要知道 在我们英文的26个字幕当中 有一个小写的x字母是在CSS中相当特殊的! 那么基线是什么呢？
解答: 基线就是小写x字母的下边缘(线) 就是我们常说的 基线 而不是那些有尾巴的英文字母, 例如: s 、j、g、k、f、y
所以一定要注意: 基线（baseline）不是汉字文字的下底部，而是英文小写字母“x”的下底部!
内联元素默认是按照基线对齐的 而基线就是小写字母x的底部! 不懂的话举个例子 如下:
北京市
<span>深圳市</span>
<strong>计算机</strong>
<img src="images/1.gif">
<< · Back Index ·>>
