解決div里面img圖片下方有空白的問題
圖片的display屬性默認(rèn)是inline蜗搔，而這個(gè)屬性的vertical-align的默認(rèn)值是baseline戳玫。所以就會出現(xiàn)上圖的情況（圖片底部出現(xiàn)一個(gè)小留白區(qū)域）周叮。
<div class="banner">
/* 插入一張banner圖片 */
<img src="images/banner4.jpg" alt="banner">
</div>
1.把img變成塊狀元素散劫，所以是否需要留白绣溜，可以用過padding來設(shè)置劲室。
img {
display: block;
}
2.直接修改vertical-align屬性值
img {
vertical-align: middle;
}
3.把img元素的底部外邊距改成負(fù)值
img {
margin-bottom: -4px;
}
4.出現(xiàn)留白的原因是因?yàn)榇怪睂R的方式所導(dǎo)致的伦仍，所以可以修改父元素的font-size，把父元素的字體大小改為0很洋，所以就沒什么垂直對齊所言
.banner {
font-size: 0;
}
5.把img的父元素行高設(shè)成0
.banner {
line-height: 0;
}
