今天小编跟大家讲解下有关CSS教程:line-height属性的继承 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS教程:line-height属性的继承 的相关资料，希望小伙伴们看了有所帮助。
原文：http://www.planabc.net/2008/07/25/unitless-line-heights/淘宝商城的detail 页面“产品详情”部分是商家自定义区块 曾出现这样一个问题：<style type="text/css">p { line-height:17px;}</style><div class="mdse-detail"> <p> <strong style="font-size:30px"> 品牌：XZX<br /> 市场价：145元<br /> 颜色：黑色<br /> 面料：棉<br /> 尺码：S M L<br /> 衣长：S 89 M 90 L 91<br /> 肩宽：S 35 M 36 L 37<br /> 胸围：S 88 M 92 L 96<br /> 下摆：S 104 M 108 L 112<br /> 袖长：S 17 M 17.5 L18<br /> 由于测量方法不同 误差在2CM左右！ </strong> </p></div>你会发现上面例子的文字会重叠在一起！这是什么原因呢 由于.detail-content 中的 p 元素继承了默认设置的全局样式 line-height:17px 而自定义区块又是由商家自定义 其内字体被设置为了 font-size:30px;（可能为任意值） 根据 Inline formatting model 得知该文字的 line-box 高为 17px 多出的字体部分上下溢出 所以会出现字体重叠的现象。那这个问题如何解决呢 解决方案：我们给 .mdse-detail 下的 p 元素设定样式属性 line-height:1.4。为什么解决方案里的 1.4 不带单位 元素的 line-height 属性值会继承父元素（或祖先元素）的 line-height 属性值 如果属性值有单位 则继承的值是换算后具体的 px 值而非原始的值（比如：em、%） 而如果属性值没有单位 则浏览器会继承数值（无单位） 然后根据该元素的 font-size 值重新解析得到新的 line-height 值。这个和 table 的 tr 设置 display 属性有一点点类似（tr.style.display = ”; IE 显示 block 而 Firefox 等标准浏览器显示 table-row）。还有另外一个相对低效的方法 但也不失为一个快捷的解决方案：.mdse-detail p * { line-height:140%;}参考阅读：《Unitless line-heights》来源：爱蒂网
