本文主要包含css和html的区别,css和css3的区别,css id class区别,css和js的区别,css中class和id的区别等相关知识,paullinjie的博客希望在学习及工作中可以帮助到您
作者：知乎用户
链接：https://www.zhihu.com/question/20394889/answer/18436957
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
链接：https://www.zhihu.com/question/20394889/answer/18436957
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
代码：
<div style="line-height:150%;font-size:16px;">
父元素内容
<div style="font-size:30px;">
Web前端开发<br />
line-height行高问题
</div>
</div>
下图是当line-height:150%的效果，父元素的行高为150%时，会根据父元素的字体大小先计算出行高值然后再让子元素继承。所以当line-height:150%时，字元素的行高等于16px * 150% = 24px：
&amp;lt;img data-rawheight="75" data-rawwidth="277" src="/UpFiles/2017/8/14/cd8d76c78e80e3183a1c241dfb39f2c5_b.jpg" class="content_image" width="277"&amp;gt;下图是当line-height:1.5em的效果，父元素的行高为150%时，会根据父元素的字体大小先计算出行高值然后再让子元素继承。所以当line-height:1.5em时，子元素的行高等于16px * 1.5em = 24px：
&amp;lt;img data-rawheight="75" data-rawwidth="277" src="/UpFiles/2017/8/14/cd8d76c78e80e3183a1c241dfb39f2c5_b.jpg" class="content_image" width="277"&amp;gt;下图是当line-height:1.5的效果，父元素行高为1.5时，会根据子元素的字体大小动态计算出行高值让子元素继承。所以，当line-height:1.5时，子元素行高等于30px * 1.5 = 45px：
&amp;lt;img data-rawheight="106" data-rawwidth="277" src="/UpFiles/2017/8/14/1a56e5fabcf173ae074e0f4ed9e61e3c_b.jpg" class="content_image" width="277"&amp;gt;作者：知乎用户
链接：https://www.zhihu.com/question/20394889/answer/135504395
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
链接：https://www.zhihu.com/question/20394889/answer/135504395
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
我开始也没搞清楚区别，看票数最高的答案没看懂，自己根据他的条件，按照 line-height 四种不同取值写了例子。
链接：Different value for line-height
截图：
&lt;img src="/UpFiles/2017/8/14/v2-0d71996efa3f7fb28e2a8f1d036715e0_b.jpg" data-rawwidth="1204" data-rawheight="892" class="origin_image zh-lightbox-thumb" width="1204" data-original="https://pic1.zhimg.com/v2-0d71996efa3f7fb28e2a8f1d036715e0_r.jpg"&gt;
总结：line-height 四种不同取值
1. normal，父、子元素的行高由浏览器分别计算得到。
2. number，父、子元素根据各自的 font-size * number 计算得到行高。
3. length（带有 css 单位，如 em，px 等），子元素直接继承父元素的行高。
4. %，子元素直接继承父元素的行高，父元素的行高根据自己的 font-size 计算得到。