CSS 中的上下行間距常常被稱為 line-height(行高)。行高定義了行框盒子(line box)的高度,這對于排版文本是非常重要的。下面我們來具體了解一下 CSS 中如何設置這個屬性。
p { line-height: 1.5; /* 設置行距為 1.5 倍字體大小 */ }
上面的代碼可以設置段落的上下行間距為 1.5 倍字體大小。這個值可以是一個數值,也可以是一種長度單位。如果是數值,它將乘以當前使用的字體大小來計算實際的距離。如果使用百分比,則相對于當前字體大小計算的百分數。
p { line-height: 20px; /* 設置行距為 20 像素 */ }
此外,你還可以使用normal
值來設置默認的行高:
p { line-height: normal; /* 使用瀏覽器的默認行高 */ }
在實際使用中,我們可能需要根據文本的不同情況設置不同的行距。比如,標題通常需要比正文更大的行距:
h1 { font-size: 36px; line-height: 1.2; /* 設置行距為字體大小的 1.2 倍 */ } p { font-size: 16px; line-height: 1.5; /* 設置行距為字體大小的 1.5 倍 */ }
這樣設置后,我們就可以得到一個比較舒適的閱讀體驗。