圖片下方三畫素原因及解決辦法

img標籤在HTML5和HTML4.0.1的嚴格模式渲染的時候，下面會有幾畫素的空白，也就是常說的圖片下方三畫素的bug。

場景：一個div裡面套一個圖片，加一個遮罩層的效果就會顯示這個問題。
原因：因為我們在編輯器裡寫程式碼的時候，同級別的標籤不寫在同一行以保持程式碼的整齊可讀性，即inline-block佈局的元素在編輯器裡不在同一行，即存在換行符，因此這就是著名的inline-block“換行符/空格間隙問題”。
解決辦法
1.img標籤的父標籤增加font-size:0;

body{
　　　　font-size: 0;
　　}

2.img標籤增加display:block;

img{
display:block;
}

3.img標籤增加vertical-align: middle;

img{
vertical-align: middle;//或者vertical-align:top;
}

4.img標籤增加float:left

img{
float:left;
}