menu
word-spacing is the CSS property that adds or subtracts the amount of space between each word in your text element, which is helpful to make your website more accessible for people with visual impairments.
taught by Tina May
You can add the amount of space between each word in pixels.
word-spacing:
Tip: Since pixel is an absolute unit, it will create the same gap between the space and the character regardless of the font size. So if your font size gets bigger, the proportion of that gap will break and the text might look ugly.
Tuition is valuable, but you know what's invaluable? Intuition.
I know what to do. But in a much more real sense, I had no idea what to do.
You miss 100% of the shots you never take.
You can use em which is relative to the font size of the element, which means that the word-spacing will change proportionally as the font size changes.
word-spacing:
Tuition is valuable, but you know what's invaluable? Intuition.
I know what to do. But in a much more real sense, I had no idea what to do.
You miss 100% of the shots you never take.
Conversely, you can reduce the amount of space between each word, by using negative value of pixels or ems.
word-spacing:
Tuition is valuable, but you know what's invaluable? Intuition.
I know what to do. But in a much more real sense, I had no idea what to do.
You miss 100% of the shots you never take.
Select any property below and we’ll show you step-by-step how to use the property, with video demo, tips and practical examples you can code for yourself.
<div>
<p class="style-1">Tuition is valuable. But you know what's invaluable? Intuition.</p>
<p class="style-2">I know what to do. But in a much more real sense, I had no idea what to do.</p>
<p class="style-3">You miss 100% of the shots you never take.</p>
</div>Tuition is valuable. But you know what's invaluable? Intuition.
I know what to do. But in a much more real sense, I had no idea what to do.
You miss 100% of the shots you never take.
.style-1 { word-spacing: 1px; }
.style-2 { word-spacing: 0.5em; }
.style-3 { word-spacing: normal; }
Try adjusting the spacing between words on each paragraph element below. You can increase or decrease the spacing using pixels or ems, or go back to its default spacing using normal.
Try these:
Copyright 2023