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

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

創(chuàng)新互聯(lián)專注于建鄴企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站設(shè)計(jì),商城網(wǎng)站開發(fā)。建鄴網(wǎng)站建設(shè)公司,為建鄴等地區(qū)提供建站服務(wù)。全流程定制網(wǎng)站制作，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

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

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

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

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

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

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

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

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

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

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

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

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

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>使用數(shù)值來設(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ù)值來設(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ù)值來設(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)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁(yè)標(biāo)題：css中怎么設(shè)置行間距
URL分享：http://muchs.cn/article12/ishogc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、網(wǎng)站策劃、品牌網(wǎng)站設(shè)計(jì)、品牌網(wǎng)站建設(shè)、品牌網(wǎng)站制作、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

微信小程序開發(fā)