HTML 圖片自動換行原因與 CSS 解決方案

為什麼 <img> 會換行？

<img> 預設 display: inline，但它是「置換元素」，行內框高度由圖片實際高度決定。當圖片高度大於文字行高，或父容器寬度不足容納多張圖片時，瀏覽器會自動換行。此外，圖片底部預設保留 vertical-align: baseline 的下沉空間（約 3–5 px），視覺上像多了一行。

常見解法

1. float: left（舊式佈局）

img { float: left; }

圖片脫離文件流並靠左浮動，後續內容環繞。需注意清除浮動（clearfix），否則父容器高度塌陷。

2. display: inline-block（推薦）

img { display: inline-block; vertical-align: top; }

保留行內特性可並排，vertical-align: top 消除底部間隙。配合父容器 font-size: 0 可進一步移除字元間距。

3. display: block（獨佔一行）

img { display: block; }

強制圖片獨佔一行，適合單張大圖展示。

4. Flexbox / Grid 現代佈局

.gallery { display: flex; flex-wrap: wrap; gap: 8px; }
.gallery img { flex: 0 0 auto; }

彈性盒子自動換行、對齊、間距控制，最適合響應式圖片牆。

避坑提醒

• 若圖片包在 <p> 等區塊元素內，外層仍會換行；需調整外層 display 或改用 <div> + Flexbox。
• 舊版 IE 需要 zoom:1; *display:inline hack 才支援 inline-block。

根據專案相容性需求選擇方案，現代專案優先使用 Flexbox/Grid。