【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

---

inline-block 是否可以取代 inline ?

✅ 簡答：

可以，但要小心。inline-block 在大多數情況下可以取代 inline，但它們在行為上仍有差異，直接替換可能會造成版面細節不同。

---

🔍 詳細說明：inline-block 取代 inline 的注意事項

比較面向	inline	inline-block	差異是否影響？
橫向排列	✅ 會	✅ 會	✅ 相同
寬高控制	❌ 無效	✅ 可控制寬高	✅ 有差異
padding / margin 上下	❌ 通常無效或不穩定	✅ 完全有效	✅ 有差異
baseline 對齊	✅ 與文字 baseline 對齊	⚠️ 有時偏移（可能上下出現間隙）	✅ 有差異
line-height 影響	✅ 受影響，與文字同行	✅ 也受影響，但更像方塊	⚠️ 可能導致意外間距
內容包覆	✅ 只包住文字寬度	✅ 包覆內容，也可設定寬高	✅ 相同
應用範圍	文字、icon 等純行內項目	小區塊元件：按鈕、badge、icon + 文字等	✅ 可取代但需測試

---

✅ 什麼情況可以直接用 inline-block 取代？

✔ 適合：

• 需要讓元素「並排」但又想控制寬高、padding、border

• 你不在意 baseline 對齊細節（或可調整）

• 你正在做「可重用的元件」如：按鈕、標籤、商品卡片

❌ 不適合：

• 像 <span> 這類行內字串包裹，如果替換成 inline-block，可能會造成行高偏移或上下出現奇怪的間距

• 想精準維持與文字「垂直對齊」的行為

---

🧪 實驗範例

<p>
  Hello <span style="display:inline; background:yellow">inline</span> world!
</p>
<p>
  Hello <span style="display:inline-block; background:lightblue">inline-block</span> world!
</p>

你會發現：

• inline 看起來比較貼齊文字

• inline-block 會有高度感，若沒特別控制 vertical-align，可能偏離 baseline

---

🎯 結論

問題	答案
inline-block 可以取代 inline 嗎？	✅ 可以，但不完全等效
有什麼副作用？	⚠️ 行高變化、baseline 偏移、可能多出空隙
要不要取代？	📌 如果需要控制寬高 → 用 inline-block；只包字串就繼續用 inline

---