css表示行高的屬性是哪個

# CSS表示行高的屬性是哪個

在網頁設計和前端開發中，**行高（line-height）**是控制文本可讀性和視覺層次的關鍵屬性。本文將深入探討CSS中表示行高的屬性、其工作原理、使用場景及最佳實踐。

---

## 一、行高的核心屬性：`line-height`

CSS中**唯一專門用于控制行高的屬性是`line-height`**。它定義了行框（line box）的最小高度，影響文本行間的垂直間距。

### 基本語法
```css
selector {
  line-height: normal | <number> | <length> | <percentage> | inherit;
}

二、屬性值類型詳解

1. 默認值 normal

• 瀏覽器默認值（通常為1.2，取決于字體族）
• 不同字體/瀏覽器的表現可能不一致

2. 無單位數值（推薦）

p { line-height: 1.5; } /* 字體大小的1.5倍 */

• 最佳實踐：計算基于當前元素的font-size
• 響應式設計的首選方案

3. 固定長度單位

div { line-height: 24px; }

• 固定像素值可能導致縮放問題
• 適用于需要精確控制的情況

4. 百分比值

span { line-height: 150%; }

• 基于元素自身的font-size計算
• 子元素會繼承計算后的值（可能不符合預期）

三、行高的計算原理

行框盒子模型

（示意圖：包含文本、行高和垂直對齊的盒子結構）

• 內容區域：字體本身決定的高度
• 行高分配：額外空間平均分布在文本上下方
• 公式：行框高度 = line-height值 > 內容高度 ? line-height : 內容高度

四、實際應用場景

1. 提升可讀性

article {
  font-size: 16px;
  line-height: 1.6; /* 適合長文本閱讀 */
}

2. 垂直居中單行文本

.button {
  height: 40px;
  line-height: 40px; /* 與容器高度相同 */
}

3. 多行文本間距控制

.multiline {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  line-height: 1.3; /* 緊湊型多行顯示 */
}

五、常見問題解決方案

1. 繼承問題

/* 父元素 */
.parent { 
  font-size: 14px;
  line-height: 1.2; /* 推薦使用無單位值 */
}

/* 子元素 */
.child {
  font-size: 24px; 
  /* 自動計算為 24px × 1.2 = 28.8px */
}

2. 全局重置建議

:root {
  --base-line-height: 1.5;
}

body {
  line-height: var(--base-line-height);
}

3. 響應式適配

@media (max-width: 768px) {
  p {
    line-height: 1.8; /* 移動端增加行間距 */
  }
}

六、與其他屬性的關系

1. 與vertical-align的交互

行高決定了vertical-align的基準線位置：

.icon {
  vertical-align: middle; /* 相對于行高居中 */
}

2. 對flex/grid布局的影響

在彈性布局中，行高會影響項目的自適高度：

.flex-item {
  display: flex;
  align-items: center; /* 需要配合行高使用 */
}

七、專業建議

1. 字體配對準則：標題使用較小行高（1.2-1.3），正文使用較大行高（1.5-1.8）
2. 測試工具：使用瀏覽器開發者工具審查計算后的行高值
3. 變量化控制：通過CSS變量實現統一管理
4. WCAG標準：確保行高至少為字體大小的1.5倍以滿足無障礙要求

結語

掌握line-height屬性是精細化排版的基礎。通過合理設置行高，不僅可以提升網頁的視覺美感，更能顯著改善用戶的閱讀體驗。建議開發者始終在項目初期就建立系統的行高規范。

擴展閱讀：
- CSS規范 - line-height
- Type-scale計算工具 “`

注：實際使用時需注意： 1. 圖片URL需替換為真實資源 2. 建議補充具體的代碼示例截圖 3. 可根據目標讀者調整技術深度（如增加CSS4新特性說明）