前言
在網頁設計或 EDM 製作中，常會遇到將多張圖片並排時，中間出現不必要的空白白線問題。這種白線通常是因為圖片元素的默認行內行為導致的空格，對於需要精確拼接圖片的場景非常困擾。
問題說明
當兩個 <img> 標籤並排時，瀏覽器會將它們視為行內元素，並在圖片間插入空白字元，導致中間出現白線。這在視覺上會破壞圖片的連續性。
解決方案
最簡單有效的方法是將 <img> 標籤的 CSS 屬性 display 設為 block，使圖片變成區塊元素，消除行內元素間的空白。
img {
display: block;
}這樣設定後，圖片間的空白白線就會消失，圖片可以無縫拼接。
實際應用
在實務中，只要在 CSS 中加入上述設定，或直接在圖片元素上加上 style="display:block;"，即可快速解決問題。這對於 EDM 或需要精準排版的網頁設計非常實用。
常見坑
- 直接刪除 HTML 中的空白字元不一定有效，因為瀏覽器仍會將行內元素間的空白視為間距。
- 使用
float或flex也能解決，但相對複雜且可能影響其他排版。
完整程式碼
<img src="圖片路徑" style="display:block;" />