在網頁設計或 EDM 製作中，常會遇到將多張圖片並排時，中間出現不必要的空白白線問題。這種白線通常是因為圖片元素的默認行內行為導致的空格，對於需要精確拼接圖片的場景非常困擾。

問題說明

當兩個 <img> 標籤並排時，瀏覽器會將它們視為行內元素，並在圖片間插入空白字元，導致中間出現白線。這在視覺上會破壞圖片的連續性。

解決方案

最簡單有效的方法是將 <img> 標籤的 CSS 屬性 display 設為 block，使圖片變成區塊元素，消除行內元素間的空白。

img {
  display: block;
}

這樣設定後，圖片間的空白白線就會消失，圖片可以無縫拼接。

實際應用

在實務中，只要在 CSS 中加入上述設定，或直接在圖片元素上加上 style="display:block;"，即可快速解決問題。這對於 EDM 或需要精準排版的網頁設計非常實用。

常見坑

• 直接刪除 HTML 中的空白字元不一定有效，因為瀏覽器仍會將行內元素間的空白視為間距。
• 使用 float 或 flex 也能解決，但相對複雜且可能影響其他排版。

完整程式碼

<img src="圖片路徑" style="display:block;" />