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