图片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引入地址之后,就会消失。
转载文章,版权归作者所有,转载请联系作者。作者:qinyuHTML,来源:https://blog.csdn.net/qinyuhua93/article/details/51788424
最新评论