解决div里面img图片下方有空白的问题
图片的display属性默认是inline，而这个属性的vertical-align的默认值是baseline。所以就会出现上图的情况（图片底部出现一个小留白区域）。
<div class="banner">
/* 插入一张banner图片 */
<img src="images/banner4.jpg" alt="banner">
</div>
1.把img变成块状元素，所以是否需要留白，可以用过padding来设置。
img {
display: block;
}
2.直接修改vertical-align属性值
img {
vertical-align: middle;
}
3.把img元素的底部外边距改成负值
img {
margin-bottom: -4px;
}
4.出现留白的原因是因为垂直对齐的方式所导致的，所以可以修改父元素的font-size，把父元素的字体大小改为0，所以就没什么垂直对齐所言
.banner {
font-size: 0;
}
5.把img的父元素行高设成0
.banner {
line-height: 0;
}
网友评论