Shulou(Shulou.com)06/03 Report--

This article mainly shows you "how to set character spacing in css", which is easy to understand and clear. I hope it can help you solve your doubts. Let me lead you to study and learn this article "how to set character spacing in css".

Css sets word spacing methods: 1, use the letter-spacing attribute, syntax "letter-spacing: spacing value;"; 2, use the word-spacing attribute, syntax "word-spacing: spacing value;"

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

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

The letter-spacing property increases or decreases the space between characters (character spacing), which defines how much space is inserted between text character boxes. Because character glyphs are usually narrower than their character boxes, the usual spacing between letters is adjusted when you specify a length value. Therefore, normal is equivalent to a value of 0.

For this attribute: each Chinese text as a "word", and every English letter as a "word"! So we should pay close attention to it.

Example:

.demo {width:500px; height: 500px; margin: 50px auto;} p {letter-spacing:20px;}

Hello, a b c d. A!

Hello, ab cd. A!

Method 2: use the word-spacing attribute-- word spacing

The word-spacing property increases or decreases the white space between words (that is, word spacing); in this property, "word" is defined as a string surrounded by a space character.

That is, the property adjusts the spacing based on spaces:

If multiple letters are concatenated together, they will be treated as one word by word-spacing

If Chinese characters are separated by spaces, multiple separated Chinese characters are treated as different words, and the word-spacing attribute is valid at this time.

Example:

.demo {width:500px; height: 500px; margin: 50px auto;} p {word-spacing:20px;}

Hello, a b c d. A!

Hello, ab cd. A!

The above is all the content of the article "how to set word spacing in css". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.