Hey everyone! 😃 In this post, we’ll take a look at the CSS property called word spacing. It controls the horizontal distance between words in a text. By default, the CSS word spacing is set to 0px, which is known as normal (word-spacing: normal). If you increase the spacing value, the distance between words will get bigger, while decreasing it will make the spacing smaller.
Let’s take a closer look at this simple yet useful CSS property to understand it better.
HTML structure for CSS word spacing
Let’s begin by creating an HTML document. In it, we include three headings <h1> that display the text “Hello World”. The first heading has the class .spacing-normal, the second heading has the class .spacing-big, and the third heading has the class .spacing-small. All headings contain the same text, as it allows an easy comparison. 👌
<h1 class="spacing-normal">Hello World</h1>
<h1 class="spacing-big">Hello World</h1>
<h1 class="spacing-small">Hello World</h1>CSS structure for CSS word spacing
For our CSS structure, we set the word-spacing property for all three classes and differentiate them by assigning different values.
.spacing-normal {
word-spacing: normal;
}
.spacing-big {
word-spacing: 100px;
}
.spacing-small {
word-spacing: -50px;
}The image below shows the impact of different word spacing values used for each of our headings. The first heading has normal word spacing, while the second has a larger distance between words due to the increased word spacing value. Similarly, the third heading has a narrower spacing resulting from the decreased value.
🔖 It is important to avoid using word spacing values that are either too large or too small.
In summary, this image demonstrates how adjusting the spacing between words can impact text appearance. It’s amazing how even small changes can have a significant impact. Isn’t it? 😎
🌼 Hope you found my post interesting and helpful. Thanks for being here! 🌼
