CSS 清除圖片間隙 在網(wǎng)頁設(shè)計(jì)中，我們時(shí)常需要使用圖片來增強(qiáng)網(wǎng)頁的表現(xiàn)力。然而，當(dāng)我們將圖片插入到網(wǎng)頁中時(shí)，經(jīng)常會(huì)發(fā)現(xiàn)圖片周圍有間隙，使得網(wǎng)頁顯得雜亂無章。這個(gè)問題該如何解決呢？ 一、問題產(chǎn)生的原因 在 HTML 中，img 標(biāo)簽被認(rèn)為是一個(gè)文本節(jié)點(diǎn)，而文本節(jié)點(diǎn)與其他文本節(jié)點(diǎn)之間會(huì)有一個(gè)空格。因此，當(dāng)我們將多個(gè) img 標(biāo)簽并排放置時(shí)，它們之間就會(huì)產(chǎn)生空隙。 二、解決方法 1. 設(shè)置 display:inline-block; 屬性 通常情況下，將圖片的 display 屬性設(shè)置為 inline-block 就可以解決圖片間隙問題。 pre { display:inline-block; margin:0; padding:0; border:0; } 2. 設(shè)置 vertical-align:top; 屬性 如果上述方法無法解決問題，我們還可以使用 vertical-align 屬性來調(diào)整圖片的垂直對(duì)齊方式。以將圖片頂部與行頂對(duì)齊，避免產(chǎn)生間隙。 pre { vertical-align:top; margin:0; padding:0; border:0; } 三、總結(jié) 通過設(shè)置圖片的 display 和 vertical-align 屬性，我們可以輕松地解決圖片間隙問題。同時(shí)，我們也可以利用 margin 和 padding 屬性來調(diào)整圖片與其他元素之間的間距。為了避免后續(xù)的樣式?jīng)_突，我們還可以添加 Reset CSS 代碼，將默認(rèn)樣式清零。 pre { margin:0; padding:0; border:0; } 如此一來，我們就可以在網(wǎng)頁設(shè)計(jì)中更加自如地使用圖片，打造出更加優(yōu)美的頁面效果。