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引入地址之后，就会消失。