Letter-spacing wrong text center alignment

Question

I have noticed a odd behavior in using letter-spacing and text-align: center together. Increasing the space, bring the text to be closer to the left margin of the element.

div {   width: 400px;   height: 200px;   background-color: #3b0d3b;   text-align: center;   margin: auto; }  p {   color: #fff;   margin-top: 40px;   text-align: center;   padding-top: 10px;   font-size: 1.2em; }  .spacing {   letter-spacing:.4em; /* This property is the problem */ }  .spacing-large {   letter-spacing:.9em; /* This property is the problem */ }

<div>   <p>- Foo Bar Zan -</p>   <p class="spacing">- Foo Bar Zan -</p>   <p class="spacing-large">- Foo Bar Zan -</p> </div>

I spot the same behavior on last Firefox and Chrome. Is there a way to fix this issue?

Answer 1

It seems you need to indent the text by the same amount as the letter-spacing. The first letter does not have the spacing applied to the left side

div {    width: 400px;    height: 400px;    background-color: #3b0d3b;    text-align: center;    margin: auto;  }    p {    color: #fff;    background: black;    text-align: center;    font-size: 1.2em;    padding: 0;    margin: 0;  }    .spacing {    letter-spacing: .4em;  }    .spacing-large {    letter-spacing: 0.9em;    text-align: center;    text-indent: 0.9em;  }

<div>    <p>- Foo Bar Zan -</p>    <p class="spacing">- Foo Bar Zan -</p>    <p class="spacing-large">- Foo Bar Zan -</p>  </div>

The logical explanation I came up with is - since it is the first letter, spacing on the left side will not apply.

Answer 2

Using padding would be safer incase the text goes onto two lines. text-indent would only indent the first line of text.

p {    padding-left: 0.9em;  }