<li><img src="img/1.jpg" style="height: 60px"/></li>
当使用以上布局时,会发现li的高度会比img的高度大几个像素。出现这种问题的原因是:
img默认是一个行内元素"display: inline",也就是跟文本的默认行为类似。文本的底端不是与父容器的底端对齐的,而是与基线对齐。我们可以用英文的四线格的最下面那条线来表示父容器的底端,用倒数第二条线来代表基线,所写的单词都是与基线对齐的。既然img与文本的默认行为类似,底端是与基线对齐的,那么就会出现img的底端与父容器的底端还有一段距离(空白)。
知道了原因,那么这个问题就比较好解决了:
-
可以改变img的默认样式"display: inline"为"display: block"。img的行为不与文本类似,那么就不用基于基线对齐了。
-
将基线(baseline)与底端(bottom)的距离设为0。可以把line-height(即top与buttom的距离)设置为0,那么baseline与bottom的距离也就变成0了。
-
将字体大小设为0(font-size: 0)可以实现。在没有设置line-height时,line-height的默认值是基于font-size的。所以将font-size设为0也可以解决,但是这样做就不可以进行图文混编啊了。
-
将img的vertical-align设置为其他值。如果同一行里有文字混编的话,还是设为bottom和middle比较好。