看张鑫旭的博客关于line-height的一些理解.
结论:一个没有定义高度的盒子的高度是由其包裹的盒子lineboxes的最大line-height决定.但是若line-boxes没有内容,即使该盒子自己定义了行高,也无法作用于自己的高度.
<div ></div>
div{line-height: 30px;background: blue;}
什么也没有显示,在浏览器上.
如果这样
<div>你好</div>
div{line-height:30px;background:blue;}
就会显示
inline-box模型中,有个line-boxes负责包裹每一行的内容.一行一个,lineboxes会监视本行里line-height最大的那一个并应用于height.
一个没有设置高度的div就是由一行行lineboxes堆砌而成的.
而line-height有垂直居中属性.