HTML5 圖片下邊界出現空隙，去除空隙的解決方法

圖片img下方出現空隙，且找不到空隙被哪一個元素佔用，無緣無故多了空隙，影響樣式設計的解決方法？

1，給<img>元素添加樣式：display:block;

<img style="display: block"  src="../../img/banner_index.png"/>

2,給<img>元素添加樣式：vertical-align:bottom，vertical-align:middle，vertical-align:top三個其中一個

<img style="dertical-align:bottom"  src="../../img/banner_index.png"/>

3,將img標籤放在一個span或者一個div標籤內，

<span  style="display: block;">
    <img src="../../img/banner_index.png">
</span>

或者

<div>
    <img src="../../img/banner_index.png">
</div>

給img標籤display:block;可能會影響到圖片的text-align:center;居中樣式

4，改img添加background樣式，圖片四周會出現一個陰影框。但是在src引入地址之後，就會消失。