How to set character spacing in css-CSS Tutorial-php.cn

How to set character spacing in css

青灯夜游

Release： 2021-10-12 16:26:49

Original

91437 people have browsed it

How to set word spacing in css: 1. Use the letter-spacing attribute, the syntax "letter-spacing: spacing value;"; 2. Use the word-spacing attribute, the syntax "word-spacing: spacing value;" .

How to set character spacing in css

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

How to set the word spacing in css? Adjust the spacing between text? The following article will introduce it to you.

Method 1: Use the letter-spacing attribute - character spacing

The letter-spacing attribute increases or decreases the space between characters (character spacing), which defines How much space to insert between text character boxes. Because character glyphs are typically narrower than their character boxes, specifying a length value adjusts the usual spacing between letters. Therefore, normal is equivalent to a value of 0.

For this attribute: each Chinese character is regarded as a "character", and each English letter is also regarded as a "character"! So everyone should pay careful attention.

Example:

<!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>

Copy after login

How to set character spacing in css

Method 2: Use the word-spacing attribute--the spacing of words

word The -spacing attribute increases or decreases the space between words (ie, word spacing); in this attribute, "word" is defined as a string surrounded by whitespace characters.

That is to say, this attribute adjusts the spacing based on spaces:

If multiple letters are connected together, they will be regarded as word-spacing A word;
If the Chinese characters are separated by spaces, the separated Chinese characters are regarded as different words, and the word-spacing attribute is valid at this time.

Example:

<!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>

Copy after login

How to set character spacing in css

(Learning video sharing: css video tutorial)

The above is the detailed content of How to set character spacing in css. For more information, please follow other related articles on the PHP Chinese website!