如何解决img出现白色底边

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

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

解决的方法：

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

CSS代码：

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

效果图：如何解决img出现白色底边

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

CSS代码：

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

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

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

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