您当前位置：首页 > web前端 > htmlcss > CSS教程：line-height的继承问题

CSS教程：line-height的继承问题

来源：程序员人生发布时间：2014-03-11 11:27:09 阅读次数：2729次

　　网(LieHuo.Net)教程平时经常见到的line-height竟包含很多鲜为人知的事。line-height的值可以为：<length>|<percentage>|<number>| noromal | inherit。em，px和百分数都相对于元素的font-size值计算。但是当一个块级元素继承另一个元素的line-height属性时，情况就会变得比较复杂。line-height值从父元素继承时，要从父元素那里计算，而不是在子元素上计算。

以下为引用的内容：
<body style="font-size:10px;">
<div style="line-height:150%">
<p style="font-size:15px;">是全球中文互联网资讯与教程的提供者，多年来一直坚持为互联网发展提供动力，热情、积极、向上、不断进取是Liehuo.Net所提倡的品格！</p>
</div>
</body>

　　这里的p的font-size是16px，但是它继承来的line-height只有15px，所以导致行挨得比较近。解决办法：1.可以为每个元素显式的设置line-height属性，但是不太实用。

　　2.指定一个数，由它设置缩放因子。

以下为引用的内容：
<body style="font-size:10px;">
<div style="line-height:1.5">
<p style="font-size:15px;">是全球中文互联网资讯与教程的提供者，多年来一直坚持为互联网发展提供动力，热情、积极、向上、不断进取是Liehuo.Net所提倡的品格！
</p>
</div>
</body>

　　指定一个数时，缩放因子将是继承值而不是计算值。这个数会应用到该元素及其所有子元素，所以各元素可以根据自己的font-size值来计算line-height。所以这里的p的line-height为15*1.5px；

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 Google 离开中国：不是单纯的经济事件

下一篇 Windows Server 2003 远程桌面的使用与设置

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点