Css之line-height计算

line-height表示行高，即两行文字基线间的距离。

行框盒子 -> 内联盒子(内联元素) -> 匿名内联盒子(内容区域/文本/行内框)，依次包含，一行为一个行框，多行为多个行框累加。

行间距是两行文字间，第一行文字底线到第二行文字顶线的距离。

半行间距，是行间距的一半。

行高 = 内容区域 + 行间距 ， (某些字体下，内容区域高度等于字体大小，如SimSun宋体)

一、块级元素的高度和字体大小，没有关系，是由行高撑开的

二、内联元素的高度是由字体大小撑开的，设置的行高不影响元素高度

三、两行文字，设置行高，值越小，由于内容区域大小不变，则行间距越小，会出现重叠现象，行高最小为0。反之同理。

 

四、在块级容器中，使内联元素垂直居中(只是看上去居中，实际上不是居中)的原理就是：

设置行高时，内容区域高度不变(一般由font-size和font-family决定)，半行间距分别增加/减少(负的半行间距)到内容区域的上下两边

                          

　　　　　　　　　　　　　　　　　　　　　　　　　　　(查看span时，IE浏览器有offset值，此值为41是因为没有计算p的1px边框)

 

 

更多Css之line-height计算相关文章请关注PHP中文网！