先上结论:
1. 数字的时候,子元素的行高 = 子元素的字体大小 * 数字
2. 百分比和em单位时,子元素的行高 = 父元素的字体大小 * 百分比(或者em单位的值)
1、百分比
代码:
<div style="line-height:150%;font-size:16px;width:300px">
父元素内容
<div style="font-size:30px;">
line-height行高问题
</div>
</div>
结果:
2、数字
<div style="line-height:1.5;font-size:16px;width:300px">
父元素内容
<div style="font-size:30px;">
line-height行高问题
</div>
</div>
3、单位为em
代码:
<div style="line-height:1.5em;font-size:16px;width:300px">
父元素内容
<div style="font-size:30px;">
line-height行高问题
</div>
</div>
结果: