html代码：

css代码：

运行结果如下图：

可以明显看到div实际高度高出img高度3px。为了解决此问题，我们只需要给img元素添加一个display : block ;即可，代码如下：

现在再来看运行结果，是不是完全变好了呢？

通过百度了解到原因，原来img是一种类似text的元素，在结束的时候，会在末尾加上一个空白符，所以就会多出3px，如果div包裹a标签也会出现同样的问题。

解决办法有三种：

　　1.设置div{ font-size: 0}；将外层块级标签的font-size设置为0；

　　2.设置img{ display: block};将内层行内标签的display设置为block，将其变为块级标签；

　　3.设置img{ vertical-align:top;}；将内层行内标签的vertical-align设置为top；