css中字間距如何設(shè)置

發(fā)布時(shí)間：2021-10-15 10:50:18 來(lái)源：億速云閱讀：154 作者：小新欄目：web開(kāi)發(fā)

這篇文章主要為大家展示了“css中字間距如何設(shè)置”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“css中字間距如何設(shè)置”這篇文章吧。

css設(shè)置字間距的方法：1、使用letter-spacing屬性，語(yǔ)法“l(fā)etter-spacing:間距值;”；2、使用word-spacing屬性，語(yǔ)法“word-spacing:間距值;”。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

方法1：使用letter-spacing屬性--字符間距

letter-spacing 屬性增加或減少字符間的空白（字符間距），該屬性定義了在文本字符框之間插入多少空間。由于字符字形通常比其字符框要窄，指定長(zhǎng)度值時(shí)，會(huì)調(diào)整字母之間通常的間隔。因此，normal 就相當(dāng)于值為 0。

對(duì)于這個(gè)屬性來(lái)說(shuō)：每一個(gè)中文文字作為一個(gè)“字”，而每一個(gè)英文字母也作為一個(gè)“字”！所以大家要細(xì)心留意一下。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			.demo{
				width:500px;
				height: 500px;
				margin: 50px auto;
			}
			p{
				letter-spacing:20px;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<p>a b c d 你 好 a ！</p>
			<p>ab cd 你好a！</p>
		</div>
	</body>
</html>

css中字間距如何設(shè)置

方法2：使用word-spacing屬性--單詞的間距

word-spacing 屬性增加或減少單詞間的空白（即字間隔）；在這個(gè)屬性中，“字” 定義為由空白符包圍的一個(gè)字符串。

也就是說(shuō)該屬性是以空格為基準(zhǔn)進(jìn)行調(diào)節(jié)間距的：

如果多個(gè)字母被連在一起，則會(huì)被word-spacing視為一個(gè)單詞；
如果漢字被空格分隔，則分隔的多個(gè)漢字就被視為不同的單詞，word-spacing屬性此時(shí)有效。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			.demo{
				width:500px;
				height: 500px;
				margin: 50px auto;
			}
			p{
				word-spacing:20px;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<p>a b c d 你 好 a ！</p>
			<p>ab cd 你好a！</p>
		</div>
	</body>
</html>

css中字間距如何設(shè)置

以上是“css中字間距如何設(shè)置”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

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

css中字間距如何設(shè)置

猜你喜歡

最新資訊

相關(guān)推薦

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