如何使用 display: block; 移除圖片銜接處的白線

更新日期： 2024 年 11 月 4 日

在網頁設計中，圖片是重要的視覺元素，經常被用於廣告、橫幅或圖像拼貼。

然而，當我們在 HTML 中將多張圖片並排顯示時，可能會發現圖片之間會有一條不明顯的白線或空隙。

這條白線的出現往往會影響網頁的美觀。

本文將介紹此現象發生的原因，並解釋如何透過設定 display: block; 屬性來消除圖片之間的白線。

為何圖片之間會出現白線？

在 HTML 中，圖片預設的 display 屬性是 inline，這表示圖片在頁面上會像文字一樣進行排列。

當元素設為 inline 時，會受到 line-height 和 vertical-align 等排版屬性的影響，這些屬性會根據字體的設計為元素之間留下一些空隙，因此多張圖片並排時就可能會產生一條不需要的白線。

這種情況下的白線，通常是由於圖片的 inline 排版方式，導致「行高差異」和「垂直對齊」模式引起的。

在 inline 模式下，元素會按照行內文字的方式進行對齊和佈局，從而無法像 block 模式那樣直接貼合，導致圖片之間有空白。

解決方法：使用 display: block;

為圖片新增 display: block;

為了解決圖片之間的白線問題，我們可以將圖片的 display 屬性設置為 block。

這樣每張圖片，將不再以行內元素的方式排列，而是以區塊元素的方式顯示。

區塊元素會自動擴展到包含其內容的整個寬度，並且在其底部不會留出任何空白空間。

img {
    display: block;
}

設定 display: block; 後，圖片不再受行高的影響，圖片之間的間距也將完全消除，從而達到緊密銜接的效果。

示例代碼

假設我們有多張並排顯示的圖片，且每張圖片的上方都有一個標題：

<div class="gallery">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
</div>

在預設情況下，這些圖片會以 inline 排列，因此可能會出現白線問題。我們可以通過以下 CSS 代碼來移除這些白線：

.gallery img {
    display: block;
}

這樣，圖片之間的白線就會消失，並且圖片會緊密地銜接在一起。

為何 display: block; 可以移除白線？

當 display 設為 block 時，圖片成為區塊元素，不再受 inline 屬性的影響，這樣圖片的排版將遵循區塊元素的佈局方式。

在區塊元素模式下，元素會佔據整行空間，並與周圍元素緊密貼合。

因此，圖片之間不會有多餘的空白，達到無縫銜接的效果。

此外，區塊元素在底部不會有因字體行高而產生的空隙，而 inline 元素會受到行高、垂直對齊等屬性的影響，這也是造成圖片之間出現空白的主要原因。

因此，將圖片設為 block 元素是最直接、有效的解決方案。

其他解決方法

除了 display: block;，還有一些其他方法可以消除圖片之間的白線。

例如：

1. 設定 vertical-align: bottom; 或 vertical-align: top;：將圖片的垂直對齊設為底部或頂部，可以減少由 inline 排版產生的空隙。
2. 移除 line-height 或調整容器的 font-size：有時圖片所在的容器行高或字體大小可能會影響圖片之間的空白，適當地減少 line-height 或調整字體大小也能達到一定效果。
3. 在父容器中設定 font-size: 0;：這樣可以消除行高影響，不過需要在子元素內部重新設置字體大小。

結論

對於網頁設計中的圖片展示，我們經常希望圖片能無縫銜接並整齊排列。

透過將圖片設置為 display: block;，可以有效地消除圖片之間的白線，使圖片能夠像區塊元素一樣自動貼合其相鄰元素。

這是最簡便、可靠的解決方案，可以幫助您在開發中解決圖片排版的常見問題。

希望這篇文章能幫助您理解 display: block; 如何影響圖片元素的排版，並能夠應用此技巧來提升您的網頁設計品質。