line-height相邻文本行基线之间的距离。所谓的基线,就是对于“xxx前端”中“xxx”的下端沿(并非“前端”的下端沿)。

两条基线的距离

文本行中的每个元素都会生成一个内容区(content area),这由字体大小决定其大小(换言之,内容区紧贴字体)内容区会生成行内框(inline box)。
如何确定给定元素的行间距,只需将line-height减去font-size,就是总的行间距(有可能为负值)。将此值除以2,再将间距的一半应用(注意并非是添加)到内容区的顶部和底部,内容区大小不受影响,行内框受到line-height的影响,而我们在屏幕上看到的正是行内框,所以为什么line-height小于font-size时,文本会重叠(因为行内框小于内容区,浏览器显示的是行内框)

一旦内成容行生所有的行内框,接下来在行框(line-box)的结构中考虑这些行内框,行框的高度恰好包含最高行内框的顶端和最低行内框的底端。

内容区content area如图

案例一

1
<p style="font-size:12px;line-height:2;">line-height</p>

原因: line-height=(1.2x2)px
类似的200%: line-height=(1.2x200%)px
案例二

1
<p style="font-size:12px;line-height:20px;">line-height</p>


原因:line-height=20px
案例三

1
2
3
4
5
<div style="line-height:10px">
<p style="font-size:18px">line-heightline-heightline-heightline-height
line-heightline-heightline-heightline-heightline-heightline-heightline-
heightline-heightline-heightline-heightline-height\</p>
</div>


原因:段落P继承父级元素div的line-height,10px < 18px,造成文字重叠
案例四

1
2
3
4
5
<div style="line-height:1">
<p style="font-size:18px">line-heightline-heightline-heightline-heightline-
heightline-heightline-heightline-heightline-heightline-heightline-
heightline-heightline-heightline-heightline-height</p>
</div>


原因:为了解决案例三的问题,设置一个缩放因子,缩放因子是继承值而不是计算值,为每个子元素根据自己的font-size计算line-height
类似的100%

当div有了文字就会产生高度,高度是来自font-size还是line-height呢?

1
2
<div style="font-size: 15px; line-height: 0; border: 1px solid #ccc;">lineheight</div>
<div style="font-size: 1px;line-height: 15px;border: 1px solid #ccc;">lineheight</div>

答案显而易见

line-height:120% 和 line-height:1.2的区别?
1.都代表line-height为当前元素font-size的1.2倍
2.1带单位的行高都有继承性,子元素继承的是计算值。当父元素字体font-size为12px,line-height为300%,子元素font-size为15px,line-height为36px非45px
2.2父元素的不带单位的行高,子元素直接继承属性值。当父元素字体font-size为12px,line-height为300%,子元素font-size为15px,line-height为45px非36px(这里子元素的font-size要大过父元素,否则显示的line-height是父元素的line-height非子元素的line-height,这关于上述行框的最终高度的选取)

资料参考出处:http://muki.tw/tech/css-line-height/