In css, you can use the "letter-spacing" property to set the spacing of letters in a word. The function of this property is to increase or decrease the spacing between characters. You only need to add {letter-spacing: spacing value;} to the text element.

image.png


The operating environment of this tutorial: windows10 system, CSS3&&HTML5 version.

How to set the spacing of letters in a word by css

Create a new html file, named test.html, to explain how css adjusts the distance between English letters. In the test.html file, use the p tag to create a line of text for testing. Add the "letter-spacing: spacing size;" style to the p tag.


The letter-spacing attribute increases or decreases the white space (character spacing) between characters.


This attribute defines how much space is inserted between the text character boxes. Since the character glyph is usually narrower than its character frame, when specifying the length value, the usual spacing between letters will be adjusted. Therefore, normal is equivalent to a value of 0.


Note: Negative values are allowed, which will make the letters squeeze tighter.


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        p{
             letter-spacing: 15px;
        }
    </style>
<head>
<body>
    <p>you are beautiful</p>
</body>
</html>

The output:

image.png

The above is the detailed content of how to set the letter spacing in a word in css. 

For more details, please refer to CSS Text tutorial, and other related articles on tutorialfish.com!