在 CSS 中,行高(line-height)屬性用于設(shè)置行與行之間的垂直距離,也就是行距(line spacing)。行高可以通過像素、百分比、em 等多種單位設(shè)置。
代碼如下:
p{ line-height: 1.5; }上述代碼將段落的行高設(shè)置為 1.5 倍其字體大小。比如,如果段落的字體大小為 16 像素,則行高為 24 像素,即 (16 * 1.5) 像素。 除了使用具體數(shù)值設(shè)置行高外,還可以使用相對(duì)單位設(shè)置行高。比如,可以使用百分比來設(shè)置行高。
p{ line-height: 150%; }上述代碼將段落的行高設(shè)置為其字體大小的 150%。同樣以字體大小為 16 像素的段落為例,其行高為 24 像素,即 (16 * 150%) 像素。 另外,還可以使用 em 單位來設(shè)置行高。em 單位相對(duì)于元素自身的字體大小。比如:
p{ font-size: 16px; line-height: 1.5em; }上述代碼同樣將段落的行高設(shè)置為其字體大小的 1.5 倍。如果段落的字體大小為 16 像素,則行高為 24 像素,即 (16 * 1.5) 像素。 需要注意的是,行高的具體值需要根據(jù)實(shí)際情況來進(jìn)行調(diào)整。通常情況下,行高應(yīng)該比字體大小略大一些,這樣可以增加文章的可讀性。當(dāng)然,如果需要實(shí)現(xiàn)特殊的視覺效果,也可以適當(dāng)?shù)卣{(diào)整行高的值。 在實(shí)際使用中,我們還可以對(duì)特定的元素或者選擇器進(jìn)行行高的設(shè)置,實(shí)現(xiàn)不同的排版效果。例如,對(duì)標(biāo)題元素進(jìn)行行高設(shè)置,可以讓標(biāo)題在頁面上更加醒目。 總之,通過合理設(shè)置行高,我們可以讓頁面的排版效果更加美觀、易讀。
下一篇css字體飄在圖片上