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