为什么img放在 li中，底部会多出几个像素？

<li><img src="img/1.jpg" style="height: 60px"/></li>

当使用以上布局时，会发现li的高度会比img的高度大几个像素。出现这种问题的原因是：

img默认是一个行内元素"display: inline"，也就是跟文本的默认行为类似。文本的底端不是与父容器的底端对齐的，而是与基线对齐。我们可以用英文的四线格的最下面那条线来表示父容器的底端，用倒数第二条线来代表基线，所写的单词都是与基线对齐的。既然img与文本的默认行为类似，底端是与基线对齐的，那么就会出现img的底端与父容器的底端还有一段距离（空白）。

知道了原因，那么这个问题就比较好解决了：

1. 可以改变img的默认样式"display: inline"为"display: block"。img的行为不与文本类似，那么就不用基于基线对齐了。

2. 将基线（baseline）与底端（bottom）的距离设为0。可以把line-height（即top与buttom的距离）设置为0，那么baseline与bottom的距离也就变成0了。

3. 将字体大小设为0（font-size: 0）可以实现。在没有设置line-height时，line-height的默认值是基于font-size的。所以将font-size设为0也可以解决，但是这样做就不可以进行图文混编啊了。

4. 将img的vertical-align设置为其他值。如果同一行里有文字混编的话，还是设为bottom和middle比较好。