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

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

---

## ✅ display 類型比較總覽表

<table id="bkmrk-%E7%89%B9%E6%80%A7%2F%E9%A1%9E%E5%9E%8B-inline-block-i"><thead><tr><th>特性/類型</th><th>`inline`</th><th>`block`</th><th>`inline-block`</th><th>`flex`</th><th>`grid`</th></tr></thead><tbody><tr><td>**是否換行**</td><td>❌ 不會</td><td>✅ 會</td><td>❌ 不會</td><td>❌ 子元素可橫向排列</td><td>❌ 預設橫向排列</td></tr><tr><td>**可否設寬高**</td><td>❌ 不行（無效）</td><td>✅ 可以</td><td>✅ 可以</td><td>✅ 可以</td><td>✅ 可以</td></tr><tr><td>**子元素排列方式**</td><td>橫向排列</td><td>垂直排列</td><td>橫向排列</td><td>橫向（可變）</td><td>依格線排列（2D）</td></tr><tr><td>**是否可佔整行**</td><td>❌</td><td>✅</td><td>❌</td><td>❌（看內容/設定）</td><td>❌（看格線配置）</td></tr><tr><td>**適合用來**</td><td>文字、行內元素</td><td>區塊、段落、容器</td><td>輕量橫向組件（按鈕等）</td><td>排列多個項目（卡片、列）</td><td>複雜版面、表格、卡片區塊</td></tr><tr><td>**可否放 block 元素**</td><td>❌</td><td>✅</td><td>✅</td><td>✅</td><td>✅</td></tr></tbody></table>

---

## ✅ 說明重點

### 🔹 `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
- 高度彈性，可定義欄/列寬度、跨欄等

---

## ✅ 總結建議（選擇指引）

<table id="bkmrk-%E6%83%B3%E5%81%9A%E7%9A%84%E4%BA%8B-%E5%BB%BA%E8%AD%B0%E4%BD%BF%E7%94%A8-%E8%A1%8C%E5%85%A7%E6%94%BE%E6%96%87%E5%AD%97%EF%BC%88%E7%84%A1%E5%AF%AC%E9%AB%98%EF%BC%89"><thead><tr><th>想做的事</th><th>建議使用</th></tr></thead><tbody><tr><td>行內放文字（無寬高）</td><td>`inline`</td></tr><tr><td>單區塊、自然上下排列</td><td>`block`</td></tr><tr><td>要設定寬高又要橫向排列</td><td>`inline-block`</td></tr><tr><td>排列表現靈活（橫、對齊）</td><td>`flex`</td></tr><tr><td>網格狀、表格排版需求</td><td>`grid`</td></tr></tbody></table>

---

## `inline-block` 是否可以取代 `inline` ?

### ✅ 簡答：

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

---

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

<table id="bkmrk-%E6%AF%94%E8%BC%83%E9%9D%A2%E5%90%91-inline-inline-b"><thead><tr><th>比較面向</th><th>`inline`</th><th>`inline-block`</th><th>差異是否影響？</th></tr></thead><tbody><tr><td>**橫向排列**</td><td>✅ 會</td><td>✅ 會</td><td>✅ 相同</td></tr><tr><td>**寬高控制**</td><td>❌ 無效</td><td>✅ 可控制寬高</td><td>✅ 有差異</td></tr><tr><td>**padding / margin 上下**</td><td>❌ 通常無效或不穩定</td><td>✅ 完全有效</td><td>✅ 有差異</td></tr><tr><td>**baseline 對齊**</td><td>✅ 與文字 baseline 對齊</td><td>⚠️ 有時偏移（可能上下出現間隙）</td><td>✅ 有差異</td></tr><tr><td>**line-height 影響**</td><td>✅ 受影響，與文字同行</td><td>✅ 也受影響，但更像方塊</td><td>⚠️ 可能導致意外間距</td></tr><tr><td>**內容包覆**</td><td>✅ 只包住文字寬度</td><td>✅ 包覆內容，也可設定寬高</td><td>✅ 相同</td></tr><tr><td>**應用範圍**</td><td>文字、icon 等純行內項目</td><td>小區塊元件：按鈕、badge、icon + 文字等</td><td>✅ 可取代但需測試</td></tr></tbody></table>

---

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

### ✔ 適合：

- 需要讓元素「並排」但又想控制**寬高、padding、border**
- 你不在意 **baseline 對齊細節**（或可調整）
- 你正在做「可重用的元件」如：按鈕、標籤、商品卡片

### ❌ 不適合：

- 像 `<span>` 這類**行內字串包裹**，如果替換成 `inline-block`，可能會造成行高偏移或上下出現奇怪的間距
- 想精準維持與文字「垂直對齊」的行為

---

## 🧪 實驗範例

```html
<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>

```

[![image-1754373945717.png](https://bookstack.treemanou.com/uploads/images/gallery/2025-08/scaled-1680-/Z7RtG5mGbap3wSdO-image-1754373945717.png)](https://bookstack.treemanou.com/uploads/images/gallery/2025-08/Z7RtG5mGbap3wSdO-image-1754373945717.png)

你會發現：

- `inline` 看起來比較貼齊文字
- `inline-block` 會有**高度感**，若沒特別控制 `vertical-align`，可能偏離 baseline

---

## 🎯 結論

<table id="bkmrk-%E5%95%8F%E9%A1%8C-%E7%AD%94%E6%A1%88-inline-block-%E5%8F%AF"><thead><tr><th>問題</th><th>答案</th></tr></thead><tbody><tr><td>`inline-block` 可以取代 `inline` 嗎？</td><td>✅ **可以，但不完全等效**</td></tr><tr><td>有什麼副作用？</td><td>⚠️ **行高變化、baseline 偏移、可能多出空隙**</td></tr><tr><td>要不要取代？</td><td>📌 **如果需要控制寬高 → 用 `inline-block`；只包字串就繼續用 `inline`**</td></tr></tbody></table>

---