关于img出现白色底边问题

在开发的过程中，发现插入一张图片后，图片会出现白色底边，很疑惑，反复调整都无济于事，到底是哪里出现了问题呢？首先看一下图片，banner下边出现了白色底边，上下都没有设置边距。

 

在学习中，有讲到，img是行内替换元素，那什么是行内替换元素呢？我认识的内替换元素input还有textarea它们都可以设置height/width/padding/margin，它们具备了行内元素的特征，不独占一行，同时也可以设置宽度、高度、内外边距。

首先图片display属性，

 

他的默认值是Inline，它规定元素应该生成框的类型，而这个属性的vertical-align的默认值是baseline。所以就会出现上图的情况（图片底部出现一个小留白区域）

解决的方法我觉得有两个很好的方法：

方法一：我理解的img它只是行内替换元素，他不是块级元素，那么直接把img变为块元素 添加display:block;属性，发现白色底边消失了。

方法二：直接添加vertical-align:middle 因为是img的vertical-align默认属性导致出现留白问题，所以直接修改vertical-align属性值就行了。

以上是我个人的理解，如果发现有哪些错误，希望对我做出评价~

转载于:https://www.cnblogs.com/zhaoweinian/p/10135518.html