img和div宽度不一致
今天写代码，遇到一个小问题，我把一张图片放进一个div里，然后没有设置任何的padding和margin，但是发现图片和div的高度不一样，在img的下方出现了3px的空隙。
//html代码
<div><img src="img/test.jpg"></div>
//css代码
div{
display: inline-block;
background-color: red;
}
img{
width: 400px;
}效果如图：很明显能看到图片下面红色背景突出的地方。
审查元素，发现div的高度比img的高度多3px。
通过百度之后了解到产生这个问题的原因：img是一种类似text的元素，在结束的时候，会在末尾加上一个空白符，所以就会多出3px。
而解决这个问题的方法也很简单，把img标签的display属性设置为block就好了。
//css代码
img{
width: 400px;
display:block;
}效果如图：