对 line-height 属性的一点误解

前几天整理自己的一个页面,在页面某一部分发现行高一直调整不到我想达到的效果,把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.

但是,在浏览器中却是下图中的效果: 

对 line-height 属性的一点误解_第1张图片

测试结果: p1 中的行距不是我想象中的24px,而是24px*200%=48px.

我得出这样一个初步的结论:如果子元素继承百分比形式的父元素 line-height,那么这个继承来的 line-height 是基于父元素 font-size 的百分比。

那如果把 parent 中的 font-size 删除呢?那 p1 的行距是不是就会是基于 p1 本身大小的百分比了?

于是我把 parent 中的 font-size:24px 删除再测试

代码
      
      
    
    
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 >

结果如下:

对 line-height 属性的一点误解_第2张图片

从上图的结果中可以看出:p1的行距,明显比上次的结果要小,但是还是比p2的行距要大。也就是说,现的p1的行距仍然不是24px,而是大于24px。

再从当前代码的基础上删除p2中的 font-size:12px

代码
      
      
    
    
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 >

结果如下:

对 line-height 属性的一点误解_第3张图片

从上图中可以看出,虽然p1和p2的字体大小不一样(p1的字体大小是12px,p2的字体大小是默认大小),但他们的行距是一样高的。

也就是说p1的行距,是基于默认字体大小的200%(样式表中p1下的200%)。

终于得出这样的结论:

子元素继承在没有定义line-height 的情况下,继承父元素的 line-height,但是继承来的 line-height 如果是以百分比来表示的,那么这个百分比是基于父元素的字体大小,如果父元素中没有定义字体大小,那么 line-height 的基准会一直上溯,直到默认字体大小。

我想其它的CSS属性一定也有类似的特性,夜深了,改天再议。

你可能感兴趣的:(对 line-height 属性的一点误解)