如何解决img出现白色底边

作者: zengde 分类: 笔记发布时间: 2021-06-04 10:02

在开发的过程中，发现插入一张图片后，图片会出现白色底边，到底是怎样解决呢，首先看一下代码：

HTML代码：

<body>
    <div class="banner">
       <img src="img/banner.jpg" alt="banner"/>
    </div>	
    <div class="bottom_box"></div>
</body>

CSS代码：

*{margin:0;padding:0;}
.banner{
     width:100%;
}
.banner img{
     width:100%;
     height:750px;
}
.bottom_box{
     width:100%;
     height:1000px;
     background-color:blue;
}

可以看到图片下边出现了白色底边，img是行内替换元素，那什么是行内替换元素呢？我认识的内替换元素input还有textarea它们都可以设置height/width/padding/margin，它们具备了行内元素的特征，不独占一行，同时也可以设置宽度、高度、内外边距，那么图片它默认就存在了间隙。

解决的方法：

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

方法二：直接添加vertical-align:middle

方法三：父元素中添加font-size:0;清除缝隙.