`, `
`, `` 等
---
### 🔹 `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 對齊細節**（或可調整）
- 你正在做「可重用的元件」如：按鈕、標籤、商品卡片
### ❌ 不適合：
- 像 `` 這類**行內字串包裹**，如果替換成 `inline-block`，可能會造成行高偏移或上下出現奇怪的間距
- 想精準維持與文字「垂直對齊」的行為
---
## 🧪 實驗範例
```html
Hello inline world!
Hello inline-block world!
```
[](https://bookstack.treemanou.com/uploads/images/gallery/2025-08/Z7RtG5mGbap3wSdO-image-1754373945717.png)
你會發現：
- `inline` 看起來比較貼齊文字
- `inline-block` 會有**高度感**，若沒特別控制 `vertical-align`，可能偏離 baseline
---
## 🎯 結論
| 問題 | 答案 |
|---|
| `inline-block` 可以取代 `inline` 嗎？ | ✅ **可以，但不完全等效** |
| 有什麼副作用？ | ⚠️ **行高變化、baseline 偏移、可能多出空隙** |
| 要不要取代？ | 📌 **如果需要控制寬高 → 用 `inline-block`；只包字串就繼續用 `inline`** |
---
# 【CSS】特殊屬性工具網站
要查詢這些 CSS 特殊屬性、瀏覽器前綴（Vendor Prefixes）以及相容性，以下這幾個網站是前端工程師必備的「軍火庫」：
### 1. Can I Use (最權威的相容性查詢)
這是全球開發者最常用的網站。只要輸入屬性名稱（例如 `scrollbar-width`），它就會用紅綠格子告訴你哪些瀏覽器支援、從哪個版本開始支援。
- **特點：** 提供精確的市佔率數據，讓你決定是否需要寫備用方案（Fallback）。
- **網址：** [caniuse.com](https://caniuse.com/)
---
- **特點：** 如果一個屬性前面有「小黃色驚嘆號」或「燒瓶圖示」，就代表它是實驗性或非標準的屬性。
- **網址：** [developer.mozilla.org](https://developer.mozilla.org/)
---
- **線上測試版：** [Autoprefixer Online](https://autoprefixer.github.io/)
- **用法：** 你可以把你寫的 CSS 貼左邊，它會自動在右邊產出相容性最高的版本。
---
- **查能不能用：** 去 **Can I Use**。
- **查怎麼寫、原理是什麼：** 去 **MDN**。
- **懶得自己寫前綴：** 設定好你的開發環境（如 Tailwind 或 PostCSS），讓 **Autoprefixer** 幫你處理。