Search code examples
htmlcss

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

Solution

  • Use letter-spacing CSS

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