line height
1 line-height与line boxes高度
在目前的css世界中,所有的高度都是由两个css模型产生的,一个是box盒状模型,对应css为“height+padding+margin”,另一个是line box模型,对应样式为line-height。
line-height
我们在编写网页的时候,会遇到这样的情况,比如有一个空的div,<div></div>
,如果没有设置高度height值时,该div的高度就是0,往div里面打入了一个空格或是文字,则此div就会有一个高度,有人会觉得是文字撑开的!实际上不是文字撑开了div的高度,而是line-height.
css代码:.test1{font-size:20px; line-height:0; border:1px solid #cccccc; background:#eeeeee;}
.test2{font-size:0; line-height:20px; border:1px solid #cccccc; background:#eeeeee;}
html代码:<div class="test1">测试</div>
<div class="test2">测试</div>
结果如下图(windows IE6浏览器下):
test1 div有文字大小,但行高为0,结果div的高度就是个0;test2 div文字大小为0,但是有行高,为20像素,结果div高度就是20像素。这就说明撑开div高度的是line-height不是文字内容。
line boxes
到底这个line-height行高怎么就产生了高度呢?在inline box模型中,有个line boxes,line boxes是看不见的,一行文字一个line boxes。line boxes什么特性也没有,就只有高度,所以一个没有设置height属性的div的高度就是由一个一个line boxes的高度堆积而成的。
line boxes的高度是由其内部最高的inline boxes的高度决定的.
例如,<span style="line-height:20px;">取下面line-height<span style="line-height:40px;">最高</span>的值</span>
。则line boxes的高度就是40像素了。
![](http://www.th7.cn/d/file/p/2015/03/16/9203c83b4760d6f511693441a110f199.png)
这里line boxes的高度就是图片的高度。