【CSS中line-height與height的區別】在使用CSS進行網頁布局時，`line-height` 和 `height` 是兩個常被混淆的屬性。雖然它們都與文本的垂直空間有關，但實際作用和應用場景卻大不相同。以下是對這兩個屬性的詳細對比總結。
一、基本概念
- `height`：用于設置元素的高度，包括內容區域和內邊距（padding），但不包括外邊距（margin）。
- `line-height`：用于設置行間距，即一行文字的基線到下一行基線之間的距離，通常用來控制文本的垂直對齊方式。
二、主要區別總結
| 屬性 | 定義 | 作用對象 | 是否影響文本對齊 | 是否影響元素高度 | 是否可繼承 |
| `height` | 設置元素的總高度 | 所有塊級元素 | 否 | 是 | 否 |
| `line-height` | 設置行間距，影響文本垂直對齊 | 文本內容 | 是 | 否 | 是 |
三、具體應用場景
1. `height` 的使用場景：
- 當你需要精確控制一個容器的高度時，例如按鈕、卡片等。
- 在需要固定高度的布局中，如導航欄、側邊欄等。
2. `line-height` 的使用場景：
- 當你希望文本在容器中垂直居中時，可以通過設置 `line-height` 等于容器的 `height` 來實現。
- 調整段落或列表項的行間距，提升可讀性。
四、注意事項
- `line-height` 只影響文本的行間距，不會改變整個元素的高度。
- 如果你只設置了 `line-height` 而沒有設置 `height`，元素的高度會根據內容自動調整。
- 使用 `line-height` 實現垂直居中時，需確保父元素有明確的 `height` 值。
五、示例代碼
```css
/ 示例：通過 line-height 實現文本垂直居中 /
.container {
height: 100px;
line-height: 100px;
text-align: center;
}
/ 示例：設置元素高度 /
.box {
height: 200px;
padding: 20px;
}
```
六、總結
`height` 和 `line-height` 雖然都與“高度”相關，但它們的作用對象和功能完全不同。理解兩者的區別有助于更精準地控制頁面布局和文本樣式，避免常見的布局錯誤。在實際開發中，合理使用這兩個屬性可以顯著提升用戶體驗和頁面美觀度。
