CODEWITHSUNDEEP
htmlcss
CoopBear
CoopBear

Reputation: 13

How to align each character horizontally with the character in the line below it?

I am trying to get characters to line up between multiple lines. For example if the following lines were displayed the periods would all be too close together and the zeros line would be much longer, even though they are the same number of characters.

...........

00000000000

Any ideas would be greatly appreciated.

Upvotes: 0

Views: 44

Answers (1)

Omri Luzon
Omri Luzon

Reputation: 4214

Use 'monospace' font (or any other mono-spaced font) and letter-spacing

h3 {
  font-family: monospace;
}
.spacing-1 {
  letter-spacing: 1px;
}
.spacing-2 {
  letter-spacing: 5px;
}
.spacing-3 {
  letter-spacing: 10px;
}
<h3 class="spacing-1">...........</h3>
<h3 class="spacing-1">00000000000</h3>
<h3 class="spacing-2">...........</h3>
<h3 class="spacing-2">00000000000</h3>
<h3 class="spacing-3">...........</h3>
<h3 class="spacing-3">00000000000</h3>

Upvotes: 4

Related Questions