解决div里面img图片下方有空白的问题

解决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;
}