'Add spaces between each letter of word HTML & CSS

I want to add a little space for styling between each letter of my word, I can achieve this by the following:

.space {
  margin-left: 5px;
}
<h1 style="text-align: center"><span class="space">S</span><span class="space">p</span><span class="space">a</span><span class="space">c</span><span class="space">e</span><span class="space">s</span></h1>

But since there is so much copying and pasting, is there a better / more efficient way to do this?

Thanks

htmlcss


Solution 1:[1]

Use letter-spacing CSS

h1 {
    letter-spacing: 5px;
}
<h1 style="text-align: center">Spaces</h1>

Solution 2:[2]

Use letter-spacing in css

<h1 class="space">Hello</h1>

.space{
 letter-spacing: 5px;
}

Solution 3:[3]

.space {
  letter-spacing: 2px;
}
<h1 class="space" style="text-align: center">Spaces</h1>

or simply you can add &nbsp; between letters.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 maraaaaaaaa
Solution 2 Hamza Atef
Solution 3 David Thomas

Related Questions