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,这关于上述行框的最终高度的选取)