css中怎么設(shè)置行間距

發(fā)布時(shí)間：2020-09-14 11:26:36 來(lái)源：億速云閱讀：152 作者：小新欄目：web開發(fā)

這篇文章主要介紹css中怎么設(shè)置行間距，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

首先我們先了解一下什么是行高，在css中又是如何設(shè)置行高，進(jìn)而設(shè)置和調(diào)整行間距。

簡(jiǎn)單來(lái)說(shuō)：行高類似于單線本，單線本里是用一行一行線條隔開的空間，線與線之間的距離就是行高。網(wǎng)頁(yè)中的文本文字實(shí)際上是寫在一條看不見的線中的，然后會(huì)默認(rèn)在行高中垂直居中顯示。那么在css中是如何設(shè)置行高的？在css中可以通過(guò) line-height 屬性來(lái)設(shè)置行高，下面我們來(lái)簡(jiǎn)單介紹一下css line-height 屬性吧。

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

line-height 與 font-size 的計(jì)算值之差（在 CSS 中成為“行間距”）分為兩半，分別加到一個(gè)文本行內(nèi)容的頂部和底部。可以包含這些內(nèi)容的最小框就是行框。

下面我們來(lái)看看css line-height屬性可能會(huì)用的的值：

normal：設(shè)置合理的行間距，默認(rèn)值。

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

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

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

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

注：所有瀏覽器都支持 line-height 屬性。

我們來(lái)用實(shí)例介紹line-height屬性是如何設(shè)置和調(diào)整行間距，下面會(huì)舉例介紹設(shè)置行間距的方法：

1、使用數(shù)值來(lái)設(shè)置行間距

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>使用數(shù)值來(lái)設(shè)置行間距</title>
		<style type="text/css">
			p.small {
				line-height: 0.5
			}
			
			p.big {
				line-height: 2
			}
		</style>
	</head>
	<body>
		<p>
			這是擁有標(biāo)準(zhǔn)行高的段落。 默認(rèn)行高大約是 1。 這是擁有標(biāo)準(zhǔn)行高的段落。 這是擁有標(biāo)準(zhǔn)行高的段落。 這是擁有標(biāo)準(zhǔn)行高的段落。 這是擁有標(biāo)準(zhǔn)行高的段落。 這是擁有標(biāo)準(zhǔn)行高的段落。
		</p>

		<p class="small">
			這個(gè)段落擁有更小的行高。 這個(gè)段落擁有更小的行高。 這個(gè)段落擁有更小的行高。 這個(gè)段落擁有更小的行高。 這個(gè)段落擁有更小的行高。 這個(gè)段落擁有更小的行高。 這個(gè)段落擁有更小的行高。
		</p>

		<p class="big">
			這個(gè)段落擁有更大的行高。 這個(gè)段落擁有更大的行高。 這個(gè)段落擁有更大的行高。 這個(gè)段落擁有更大的行高。 這個(gè)段落擁有更大的行高。 這個(gè)段落擁有更大的行高。 這個(gè)段落擁有更大的行高。
		</p>
	</body>

</html>

效果圖：

css中怎么設(shè)置行間距

2、使用像素值設(shè)置行間距

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>使用數(shù)值來(lái)設(shè)置行間距</title>
		<style type="text/css">
			p.small {
				line-height: 10px;
			}
			
			p.big {
				line-height: 30px
			}
		</style>
	</head>

	<body>
		<p>
			這是擁有標(biāo)準(zhǔn)行高的段落。 在大多數(shù)瀏覽器中默認(rèn)行高大約是 20px。 這是擁有標(biāo)準(zhǔn)行高的段落。 這是擁有標(biāo)準(zhǔn)行高的段落。 這是擁有標(biāo)準(zhǔn)行高的段落。 這是擁有標(biāo)準(zhǔn)行高的段落。 這是擁有標(biāo)準(zhǔn)行高的段落。
		</p>

		<p class="small">
			這個(gè)段落擁有更小的行高。 這個(gè)段落擁有更小的行高。 這個(gè)段落擁有更小的行高。 這個(gè)段落擁有更小的行高。 這個(gè)段落擁有更小的行高。 這個(gè)段落擁有更小的行高。 這個(gè)段落擁有更小的行高。
		</p>

		<p class="big">
			這個(gè)段落擁有更大的行高。 這個(gè)段落擁有更大的行高。 這個(gè)段落擁有更大的行高。 這個(gè)段落擁有更大的行高。 這個(gè)段落擁有更大的行高。 這個(gè)段落擁有更大的行高。 這個(gè)段落擁有更大的行高。
		</p>
	</body>

</html>

效果圖：

css中怎么設(shè)置行間距

3、使用百分比設(shè)置行間距

line-height屬性指定了一個(gè)百分?jǐn)?shù)，則會(huì)相對(duì)于字體去計(jì)算行高。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>使用數(shù)值來(lái)設(shè)置行間距</title>
		<style type="text/css">
			p.small {
				line-height: 80%;
			}
			
			p.big {
				line-height: 200%;
			}
		</style>
	</head>

	<body>
		<p>
			這是擁有標(biāo)準(zhǔn)行高的段落。 在大多數(shù)瀏覽器中默認(rèn)行高大約是 110% 到 120%。 這是擁有標(biāo)準(zhǔn)行高的段落。 這是擁有標(biāo)準(zhǔn)行高的段落。 這是擁有標(biāo)準(zhǔn)行高的段落。 這是擁有標(biāo)準(zhǔn)行高的段落。 這是擁有標(biāo)準(zhǔn)行高的段落。
		</p>

		<p class="small">
			這個(gè)段落擁有更小的行高。 這個(gè)段落擁有更小的行高。 這個(gè)段落擁有更小的行高。 這個(gè)段落擁有更小的行高。 這個(gè)段落擁有更小的行高。 這個(gè)段落擁有更小的行高。 這個(gè)段落擁有更小的行高。
		</p>

		<p class="big">
			這個(gè)段落擁有更大的行高。 這個(gè)段落擁有更大的行高。 這個(gè)段落擁有更大的行高。 這個(gè)段落擁有更大的行高。 這個(gè)段落擁有更大的行高。 這個(gè)段落擁有更大的行高。 這個(gè)段落擁有更大的行高。
		</p>
	</body>

</html>

效果圖：

css中怎么設(shè)置行間距

以上是css中怎么設(shè)置行間距的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

css中怎么設(shè)置行間距

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽