通過line-height屬性調(diào)整文本行間距，推薦使用無單位數(shù)值以提升可讀性與響應(yīng)式適配，合理設(shè)置可優(yōu)化排版美觀與閱讀體驗(yàn)。

在HTML和CSS中，調(diào)整文本行間距（也稱為“行高”）主要通過 line-height 屬性來實(shí)現(xiàn)。這個(gè)屬性控制的是文本行與行之間的垂直間距，合理設(shè)置可以讓內(nèi)容更易讀、排版更美觀。

1. 使用CSS的line-height屬性

line-height 是最直接控制行間距的方式，可以在內(nèi)聯(lián)樣式、內(nèi)部樣式表或外部CSS文件中使用。

• 數(shù)字（無單位）：如 1.5，表示行高為字體大小的1.5倍，推薦使用，具有良好的繼承性
• 像素（px）：如 20px，固定行高，適合精確控制
• 百分比（%）：如 150%，基于當(dāng)前字體大小計(jì)算
• em單位：如 1.5em，相對(duì)當(dāng)前字體大小

示例：

p {
  line-height: 1.6; /* 推薦做法 */
}
h1 {
  line-height: 1.2;
}
.small-text {
  line-height: 18px;
}

2. 在HTML標(biāo)簽中直接設(shè)置（不推薦但可用）

可以通過內(nèi)聯(lián) style 屬性快速設(shè)置某一段落或元素的行高。

立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；

<p style="line-height: 2;">這是一段有較大行距的文字。</p>
<div style="line-height: 1.4;">自定義行高的區(qū)塊</div>

雖然方便，但建議將樣式寫在CSS中以保持結(jié)構(gòu)與表現(xiàn)分離。

行者AI

行者AI繪圖創(chuàng)作，喚醒新的靈感，創(chuàng)造更多可能

100

查看詳情

3. 行高設(shè)置的最佳實(shí)踐

合理設(shè)置行高能顯著提升閱讀體驗(yàn)，尤其在大段文字中。

• 正文文本推薦使用 1.5 到 1.8 的無單位值
• 標(biāo)題可使用較小值，如 1.1 到 1.3，避免顯得松散
• 移動(dòng)端注意適配，適當(dāng)增加行高提升可讀性
• 避免使用過小的行高（如小于1），會(huì)導(dǎo)致文字重疊

4. 注意繼承與子元素的影響

當(dāng)父元素設(shè)置 line-height 為數(shù)字時(shí)，子元素會(huì)基于自己的字體大小重新計(jì)算行高；若設(shè)為固定值（如px），則不會(huì)按比例縮放。

例如：

body {
  font-size: 16px;
  line-height: 1.5; /* 子元素按自身字號(hào)乘以1.5 */
}

這樣更靈活，適合響應(yīng)式設(shè)計(jì)。

基本上就這些。掌握 line-height 的用法，能讓你的網(wǎng)頁文本看起來更專業(yè)、舒適。關(guān)鍵是根據(jù)內(nèi)容類型選擇合適的值，并優(yōu)先使用無單位數(shù)值來保證可維護(hù)性和響應(yīng)性。不復(fù)雜但容易忽略細(xì)節(jié)。

以上就是HTML文本行間距設(shè)置方法_HTML line-height行高調(diào)整技巧的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！