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像素了。

这里line boxes的高度就是图片的高度。