CSS中圖片下面留白是網(wǎng)頁布局經(jīng)常會(huì)遇到的問題，這種情況一般是由于圖片的垂直對(duì)齊方式導(dǎo)致的。下面我們來看看如何解決這個(gè)問題。

在CSS中，圖片默認(rèn)情況下是基線對(duì)齊的。我們可以通過設(shè)置圖片的vertical-align屬性來改變垂直對(duì)齊方式，從而解決圖片下面留白的問題。

img {
vertical-align: middle;
}

在上面的代碼中，我們將圖片的垂直對(duì)齊方式設(shè)置為中間對(duì)齊。除了middle，還可以設(shè)置為top、bottom、text-top、text-bottom等值。根據(jù)情況選擇不同的值即可。

當(dāng)然，如果圖片已經(jīng)占據(jù)了一行（比如作為段落的一部分），我們也可以將段落的行高設(shè)置為圖片的高度，從而避免下方出現(xiàn)留白。如下代碼所示：

p {
line-height: 1.5em;
}
img {
height: 1.5em;
vertical-align: middle;
}

在上面的代碼中，我們將段落的行高設(shè)置為1.5倍行高（即1.5em），將圖片的高度也設(shè)置為1.5em，保證了圖片與文字的垂直對(duì)齊，并避免了下方的留白。

總之，解決圖片下面留白問題的方法有多種，我們需要根據(jù)具體情況進(jìn)行選擇和處理。只要掌握了相關(guān)知識(shí)，就能輕松應(yīng)對(duì)各種布局需要，提高網(wǎng)頁制作效率。