关于line-height单位和line-height的继承

最新推荐文章于 2021-10-21 20:08:33 发布

chunying7800

最新推荐文章于 2021-10-21 20:08:33 发布

阅读量143

点赞数

原文链接：https://my.oschina.net/imeasyer/blog/667830

版权

在阅读bootstrap3源码的时候看到这样一段，

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.428571429;
  color: #333333;
  background-color: #ffffff;
}

其中让我不能理解是为何line-height没有单位。随后在网上查询资料，发现line-height继承的一个有趣现象。在进行文字排版的时候，有时候为了保持一定的行间距，就将line-height按比例设置的比font-size 大。比如有以下代码：

<div style="font-size: 14px;width: 300px;line-height: 150%;border: 1px solid;">
  我是父Div,我是父Div,我是父Div,我是父Div,我是父Div,我是父Div我是父Div,我是父Div,我是父Div
  我是父Div,我是父Div,我是父Div,我是父Div,我是父Div,我是父Div我是父Div,我是父Div,我是父Div
  <div style="font-size: 30px;width: 200px;border: 1px solid;">
  这是一个line-height百分比的测试
  </div>
</div>

对于父DIV，我们应当知道line-height的真实值为14*150%=21px，而由于line-height是会继承的，那么子div的line-height值是多少呢，不是30*150%，而是21px。

而如果我们换成没有单位的写法：

<div style="font-size: 14px;width: 300px;line-height: 1.5;border: 1px solid;">
  我是父Div,我是父Div,我是父Div,我是父Div,我是父Div,我是父Div我是父Div,我是父Div,我是父Div
  我是父Div,我是父Div,我是父Div,我是父Div,我是父Div,我是父Div我是父Div,我是父Div,我是父Div
  <div style="font-size: 30px;width: 200px;border: 1px solid;">
  这是一个line-height没有单位的测试
  </div>
</div>

子DIV的line-heigt就变成了我们想要的45px

转载于:https://my.oschina.net/imeasyer/blog/667830