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