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

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

✅ display 類型比較總覽表

✅ 說明重點

🔹 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 ?

✅ 簡答：

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

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

✅ 什麼情況可以直接用 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

🎯 結論