【CSS】inline, block, inline-block 比較

當然可以！以下是一份完整對比 inline、block、inline-block 以及其他 相似概念的屬性（如 flex、grid） 的整理，幫你從「排列方式、寬高設定、用途」等角度快速掌握它們的差異：

---

✅ display 類型比較總覽表

特性/類型	inline	block	inline-block	flex	grid
是否換行	❌ 不會	✅ 會	❌ 不會	❌ 子元素可橫向排列	❌ 預設橫向排列
可否設寬高	❌ 不行（無效）	✅ 可以	✅ 可以	✅ 可以	✅ 可以
子元素排列方式	橫向排列	垂直排列	橫向排列	橫向（可變）	依格線排列（2D）
是否可佔整行	❌	✅	❌	❌（看內容/設定）	❌（看格線配置）
適合用來	文字、行內元素	區塊、段落、容器	輕量橫向組件（按鈕等）	排列多個項目（卡片、列）	複雜版面、表格、卡片區塊
可否放 block 元素	❌	✅	✅	✅	✅

---

✅ 說明重點

🔹 inline

• 僅佔內容寬度，不換行

• 無法設定寬高

• 適合用於 <span>, <a>, <strong> 等

---

🔹 block

• 自動換行，佔滿整行

• 可設定寬高

• 適合用於 <div>, <p>, <section> 等

---

🔹 inline-block

• 類似 inline，可以水平排列

• 同時擁有 block 的能力：可以設定寬高

• 適合做「按鈕、badge、圖片說明」等不佔整行的小元件

---

🔹 flex（父元素設 display: flex）

• 子元素預設橫向排列

• 可用 justify-content, align-items 控制對齊方式

• 適合用於橫向 layout, 排卡片、工具列等

---

🔹 grid（父元素設 display: grid）

• 子元素依格線排列，可橫可縱

• 適合做表格式、欄位分佈清楚的 layout

• 高度彈性，可定義欄/列寬度、跨欄等

---

✅ 總結建議（選擇指引）

想做的事	建議使用
行內放文字（無寬高）	inline
單區塊、自然上下排列	block
要設定寬高又要橫向排列	inline-block
排列表現靈活（橫、對齊）	flex
網格狀、表格排版需求	grid

---

如果你正在設計一個實際 layout（例如登入頁、商品區塊、導覽列），我可以幫你判斷哪一種 display 最適合那個情境。要不要給我一個畫面需求？我幫你套 display 概念。