当<div>中含有<img>时，<div>的高度比<img>的高度要多3px。如何解决？

<div class="pic">
        <img src="/images/1.jpg"/>

      </div>

<div class="pic">
        <img src="images/2.jpg"/>
      </div>

如果将一个img放在div里面，你会发现在img下面无端端的就多出3px的空白出来。padding、margin、border都设为0，无效！那么怎么解决这个问题呢？

因为img默认是按基线(baseline)对齐的。对比一下图片和右边的p, q, y等字母，你会发现这三个字母的“小尾巴”和图片下方的空白一样高。下面这张图中的黑线就是那条基线。

要去掉空格可以使用vertical-align: bottom或将img标签变为块级元素。

至于什么是基线，还记得四线三格的英语写字本么？中间第三条线就是基线。

解决方案:

img{display:block}

img{vertical-align:top}

都可以。自行选择。