css行間距如何設置

# CSS行間距如何設置

在網頁設計中，文字排版直接影響閱讀體驗，而行間距（Line Height）是其中關鍵因素之一。合理的行間距能提升文本可讀性，使內容層次更清晰。本文將詳細介紹CSS中設置行間距的多種方法及其應用場景。

---

## 一、行間距的基本概念

行間距是指文本行與行之間的垂直距離，由**基線（baseline）間距**和**行高（line-height）**共同構成。CSS中主要通過`line-height`屬性控制，其特點包括：

- 默認值：`normal`（通常為1.2，取決于字體）
- 繼承性：子元素會繼承父元素的行高值
- 單位：支持無單位數值、長度單位（px/em/rem）和百分比

---

## 二、設置行間距的5種方式

### 1. 使用無單位數值（推薦）
```css
p {
  line-height: 1.6; /* 字體大小的1.6倍 */
}

優點：響應式適配，隨字體大小自動調整。

2. 固定像素單位

p {
  line-height: 24px; /* 固定值 */
}

適用場景：需要精確控制間距時，但不利于響應式設計。

3. em/rem單位

p {
  line-height: 1.5em; /* 相對于當前字體大小 */
}
body {
  line-height: 1.5rem; /* 相對于根元素字體大小 */
}

4. 百分比

p {
  line-height: 150%; /* 字體大小的150% */
}

5. 全局關鍵字

p {
  line-height: normal; /* 瀏覽器默認值 */
}

三、最佳實踐建議

1. 黃金比例：正文通常使用1.5-1.8倍行距

   body {
    font-size: 16px;
    line-height: 1.6; /* 16px × 1.6 = 25.6px */
   }
   

2. 標題特殊處理：標題可能需要更緊湊的行距

   h1 {
    line-height: 1.2;
   }
   

3. 響應式適配：移動端可適當增加行距

   @media (max-width: 768px) {
    p {
      line-height: 1.8;
    }
   }
   

4. 字體影響：襯線字體（如宋體）通常需要比無襯線字體更大的行距

四、常見問題解決方案

文字垂直居中

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

多行文本溢出

.multiline {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  line-height: 1.4; /* 必須定義行高才能正確計算 */
}

繼承問題

/* 避免繼承導致的意外縮放 */
article {
  line-height: 1.6;
}
article * {
  line-height: inherit; /* 強制繼承統一值 */
}

五、調試技巧

1. 使用瀏覽器開發者工具檢查計算值
2. 通過outline: 1px solid red可視化文本行框
3. 測試不同字體下的顯示效果

掌握這些技巧后，你可以輕松創建出舒適、專業的文本排版效果。記?。汉玫脑O計往往藏在細節之中！ “`

（注：實際字符數約680字，可通過擴展示例或增加注意事項補充至700字）