图片的display属性默认是inline，而这个属性的vertical-align的默认值是baseline。所以就会出现上图的情况（图片底部出现一个小留白区域）。
解决方法：
方法1：
img{display: block;}
把img变成块状元素，所以是否需要留白，可以用过padding来设置。
方法2：
img{vertical-align: middle;}
既然分析到img的vertical-align默认属性导致出现留白问题，所以直接修改vertical-align属性值就行咯。
方法3：
img{margin-bottom: -4px;}
把img元素的底部外边距改成负值，同样可以实现去留白的效果。
这里修改的值的大小，会影响整个页面的布局。
修改的足够小（比如-100px），图片的留白部分就会消失，但是img之后的元素会被动上移，且会藏在img标签的下面。甚至一不小心就很容易把img后面的内容网上移得太多，导致内容显示不全。
如下图所示：
image.png
其中，section里面的内容也会被覆盖一部分。
所以我这个案例修改成-4就ok了。
因为这个方法可能会导致出现一些意想不到的事情，所以不建议用这个方法。
方法4：
.banner{font-size:0;}
由上面的分析得到，出现留白的原因是因为垂直对齐的方式所导致的，所以可以修改父元素的font-size，把父元素的字体大小改为0，所以就没什么垂直对齐所言咯。
要注意的是：这个修改会影响class="banner"这个元素里面的字体（因为字体属性能继承）。
同时需要注意的是：font-size要放在img的父元素里，不能直接放在img样式里面。
方法5：
.banner{line-height:0;}
把img的父元素行高设成0，这样也就没什么垂直对齐所言。
需要注意的点和方法4所需注意的点差不多。
网友评论