<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>line-height值的形式不同子元素的行高也会不同</title> <style> .father{font-size: 14px;background:#ccc;} .son{font-size:26px;} .father1{line-height: 150%;} .father2{line-height: 1.5;} .father3{line-height: 1.5em;} </style> </head> <body> <p>父元素的字体大小为14px,子元素字体大小为26px</p> <h2>父元素行高为150%时</h2> <div class="father father1"> 父元素font-size:14px;line-height:150%;计算值是 14px * 1.5 = 21px <div class="son"> 子元素font-size:26px;line-height = 父元素行高 = 21px; </div> </div> <h2>父元素行高为1.5时</h2> <div class="father father2"> 父元素font-size:14px;line-height:1.5;计算值是 14px * 1.5 = 21px <div class="son"> 子元素font-size:26px;line-height会继承父元素的1.5，计算得值26px * 1.5 = 39px(子元素的行高); </div> </div> <h2>父元素行高为1.5em时</h2> <div class="father father3"> 父元素font-size:14px;line-height:1.5em;计算值是 14px * 1.5 = 21px <div class="son"> 子元素font-size:26px;line-height = 父元素行高 = 21px; </div> </div> </body> </html>
微信号“前端大全‘中看到一篇”这可能是史上最全的CSS自适应布局总结“中看到张鑫旭的”学习CSS的瓶颈“，在其中看到一个问题”line-height:150%和line-height:1.5的区别是？“（这引玉深度。。。）特此记录下自己学习的东西，方便以后进行查阅。
line-height的值：normal | <number> | <length> | <percentage>
百分比中的"%"：是继承父级元素的距离；
"无单位"：是子元素计算各自的行距离
两者的区别：
- 父元素设置line-height:1.5会直接继承给子元素，子元素根据自己的font-size再去计算子元素自己的line-height。
- 父元素设置line-height:150%是计算好了line-height值，然后把这个计算值给子元素继承，子元素继承拿到的就是最终的值了。此时子元素设置font-size就对其line-height无影响了。
http://www.cnblogs.com/starof/p/4742323.html
https://www.zhihu.com/question/20394889
https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
http://www.zhangxinxu.com/wordpress/2009/11/css行高line-height的一些深入理解及应用/