Home >Web Front-end >CSS Tutorial >How to set character spacing in css
How to set character spacing in css
- 青灯夜游Original
- 2021-10-12 16:26:4991373browse
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;" .
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>
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>
(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!