CODEWITHSUNDEEP
htmlcss
Rani Giterman
Rani Giterman

Reputation: 762

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

Upvotes: 0

Views: 1575

Answers (4)

Fattie
Fattie

Reputation: 12592

Just to make it easier for non-html programmers:

Add this "style" at the top,

<html><head><title>Company Name Ltd.</title></head>
<style>
    .spaced { letter-spacing: 8px; }
</style>
<body bgcolor=red>
...

then use in your normal "font" tag,

<center><font face=serif size=4 color=ff8888 class="spaced"><i>
some fancy thing
<br><br>
another elegant thing
</i></font></center><br>

and that's it.

enter image description here

Upvotes: 0

Homam AL Takrity
Homam AL Takrity

Reputation: 21

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

or simply you can add &nbsp; between letters.

Upvotes: 2

Hamza Atef
Hamza Atef

Reputation: 31

Use letter-spacing in css

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

.space{
 letter-spacing: 5px;
}

Upvotes: 2

maraaaaaaaa
maraaaaaaaa

Reputation: 8163

Use letter-spacing CSS

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

Upvotes: 4

Related Questions