CSS 文本行間距l(xiāng)ine-height

提問人：劉團(tuán)圓發(fā)布時(shí)間：2020-11-18

line-height屬性設(shè)置行間的距離（行高），不允許使用負(fù)值。該屬性會(huì)影響行框的布局。在應(yīng)用到一個(gè)塊級元素時(shí)，它定義了該元素中基線之間的最小距離，而不是最大距離。

line-height與font-size的計(jì)算值之差（在CSS中稱為“行間距”）分為兩半，分別加到一個(gè)文本行內(nèi)容的頂部和底部?？梢园@些內(nèi)容的最小框就是行框。

原始數(shù)字值指定了一個(gè)縮放因子，后代元素會(huì)繼承這個(gè)縮放因子，而不是計(jì)算值。

line-height屬性的值可以是以下幾種：

?normal：設(shè)置合理的行間距。

?number：設(shè)置數(shù)字，此數(shù)字會(huì)與當(dāng)前的字體尺寸相乘以設(shè)置行間距。

?length：設(shè)置固定的行間距。

?%:基于當(dāng)前字體尺寸的百分比行間距。

?Inherit：規(guī)定應(yīng)該從父元素繼承fine-height屬性的值。

【例題】設(shè)置文本行間距

代碼如下：

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

<style>

.d1{

line-height: 50px;

}

</style>

</head>

<body>

<div>這是行高為50px的文字</div>

<div>這是默認(rèn)行高的文字</div>

<div>這是行高為50px的文字</div>

<div>這是默認(rèn)行高的文字</div>

</body>

</html>

相關(guān)視頻回答

回復(fù)(0)