前几天整理自己的一个页面,在页面某一部分发现行高一直调整不到我想达到的效果,把CSS捋了一遍,终于发现症结所在。做了个示例,如下。
假设页面代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>test Page</title>
<style type="text/css">
#parent
{
font-size:24px;
line-height:200%;
}
#p1
{
font-size:12px;
}
#p2
{
font-size:12px;
line-height:200%;
}
</style>
</head>
<body>
<div id="parent">
<p id="p1">
Some puzzle about line-height<br />
Some puzzle about line-height<br />
Some puzzle about line-height<br />
Some puzzle about line-height<br />
Some puzzle about line-height<br />
</p>
<hr />
<p id="p2">
Some puzzle about line-height<br />
Some puzzle about line-height<br />
Some puzzle about line-height<br />
Some puzzle about line-height<br />
Some puzzle about line-height<br />
</p>
</div>
</body>
</html>
按照我的理解:
既然在父元素parent中定义了 line-height:200%, 又在子元素p1中定义了 font-size:12px, 按照p1继承父元素parent行距的原则,那么,在p1中的行距应该是 12px*200%=24px.
p2中因为既定义了font-size:12px, 又定义了 ine-height:200%, 那么p2中的行距应该是:12px*200%=24px.
但是,在浏览器中却是下图中的效果:
测试结果: p1 中的行距不是我想象中的24px,而是24px*200%=48px.
我得出这样一个初步的结论:如果子元素继承百分比形式的父元素 line-height,那么这个继承来的 line-height 是基于父元素 font-size 的百分比。
那如果把 parent 中的 font-size 删除呢?那 p1 的行距是不是就会是基于 p1 本身大小的百分比了?
于是我把 parent 中的 font-size:24px 删除再测试
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>test Page</title>
<style type="text/css">
#parent
{
line-height:200%;
}
#p1
{
font-size:12px;
}
#p2
{
font-size:12px;
line-height:200%;
}
</style>
</head>
<body>
<div id="parent">
<p id="p1">
Some puzzle about line-height<br />
Some puzzle about line-height<br />
Some puzzle about line-height<br />
Some puzzle about line-height<br />
Some puzzle about line-height<br />
</p>
<hr />
<p id="p2">
Some puzzle about line-height<br />
Some puzzle about line-height<br />
Some puzzle about line-height<br />
Some puzzle about line-height<br />
Some puzzle about line-height<br />
</p>
</div>
</body>
</html>
结果如下:
从上图的结果中可以看出:p1的行距,明显比上次的结果要小,但是还是比p2的行距要大。也就是说,现的p1的行距仍然不是24px,而是大于24px。
再从当前代码的基础上删除p2中的 font-size:12px
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>test Page</title>
<style type="text/css">
#parent
{
line-height:200%;
}
#p1
{
font-size:12px;
}
#p2
{
line-height:200%;
}
</style>
</head>
<body>
<div id="parent">
<p id="p1">
Some puzzle about line-height<br />
Some puzzle about line-height<br />
Some puzzle about line-height<br />
Some puzzle about line-height<br />
Some puzzle about line-height<br />
</p>
<hr />
<p id="p2">
Some puzzle about line-height<br />
Some puzzle about line-height<br />
Some puzzle about line-height<br />
Some puzzle about line-height<br />
Some puzzle about line-height<br />
</p>
</div>
</body>
</html>
结果如下:
从上图中可以看出,虽然p1和p2的字体大小不一样(p1的字体大小是12px,p2的字体大小是默认大小),但他们的行距是一样高的。
也就是说p1的行距,是基于默认字体大小的200%(样式表中p1下的200%)。
终于得出这样的结论:
子元素继承在没有定义line-height 的情况下,继承父元素的 line-height,但是继承来的 line-height 如果是以百分比来表示的,那么这个百分比是基于父元素的字体大小,如果父元素中没有定义字体大小,那么 line-height 的基准会一直上溯,直到默认字体大小。
我想其它的CSS属性一定也有类似的特性,夜深了,改天再议。