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

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

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

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

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

总结

以上是内存溢出为你收集整理的CSS教程：line-height的继承问题全部内容，希望文章能够帮你解决CSS教程：line-height的继承问题所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/web/1021805.html