CSS中line-height带单位与不带单位，带何种单位的区别

来源：互联网发布：相册软件免费下载编辑：程序博客网时间：2024/04/30 13:44

转载自：http://blog.sina.com.cn/s/blog_6b2fcbbc0101df5u.html

我们都知道line-height是可以继承的，由于这个特性，子元素就可以不用重复定义line-height了。但line-height会给人误解的地方也就是这个继承。这是怎么回事呢？别急，我们先来看一幅图。
（图一）

看着图一，是不是让你心生“亲切”呢?^_^不过即使不感到亲切，也会觉得眼熟。明眼人一眼就能看出这是line-height导致的，其实这就是line-height好玩的地方。

　　有的时候，我们为了实现单行文字的垂直居中，会给line-height一个和height相同的固定的值；有的时候，我们为了调整特定的某段文字的行间距，通常会考虑使用百分比或者相对尺寸的em。或许是习惯，于是我们都习惯了line-height是要有单位的。

　　但，很明显，这些情况下，我们都不需要考虑line-height的继承，所以我们不会发现任何问题。

　　然而，当你要使用到line-height继承的时候，你会发现原来还有那么多的猫腻藏在其中。比如有这样一个结构（例一）：

你会发现这2行字重叠了，问题来了吧。按普通的思维定式来看，由于line-height会被继承，于是pre内部的文字也应该是line-height:150%，所以出现重叠，似乎太过玄乎？

　　别急，再来看更具体例子的效果（例二）：

源代码：

<htmlxmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type"content="text/html; charset=utf-8" /><meta http-equiv="Content-Language"content="utf-8" /><title>line-height属性的继承问题</title><meta name="Author" content="Doyoe(飘零雾雨),dooyoe@gmail.com" /><style type="text/css">body{font-size:14px;}h3{margin:10px 0;color:#fe5600;font:bold 20px/1.5arial,helvetica,clean,sans-serif;}.px-line-height{line-height:15px;}.em-line-height{line-height:1.5em;}.percent-line-height{line-height:150%;}.nounits-line-height{line-height:1.5;}pre{font-size:30px;}</style></head><body><h3>line-height:15px</h3><divclass="px-line-height"><pre>传说中的测试情况为line-height:15px时</pre></div><h3>line-height:1.5em</h3><divclass="em-line-height"><pre>传说中的测试情况为line-height:1.5em时</pre></div><h3>line-height:150%</h3><divclass="percent-line-height"><pre>传说中的测试情况为line-height:150%时</pre></div><h3>line-height:1.5</h3><divclass="nounits-line-height"><pre>传说中的测试情况为line-height:1.5时</pre></div></body></html>

总结：

父元素的行高为150%或1.5em时，会根据父元素的字体大小先计算出行高值然后再让子元素继承，而1.5是根据子元素的字体大小动态计算出行高值让子元素继承。

0 0