img 标签出现几像素的空白

开发过程中，使用设计切好的图片放入div中，发现img竟然有几像素的空白。

<div class="imgTest">
	<img src="./img/test3.jpg"/>
</div>
           

明显发现下方有几像素的空白，还有像这样两张图片放一起的效果：

问题产生的原因主要是：div属于块级元素，块级元素内部默认有行框，这个默认的行框会将块级元素撑高。img默认属性displa:inline-block，所以也会产生匿名块来包裹img标签。匿名块内部则会生成行框，就会产生上图所示的几个像素。

解决方式:

1、img属性设置为:display:block

2、父级元素font-size:0;line-height:0