letter-spacingは文字間を調整するCSSプロパティで文字の後ろのスペースを調整します。
そのため、値分の文字の後ろにできたスペースのせいでずれてるように見えることがあります。
文字の折返しで揃えているとき、文字を中央寄せしたときなどに気になる部分で意外と困りますよね?
<div>
<p>あいうえお<strong>かきくけこ</strong>さしすせそ</p>
</div>
div {
letter-spacing: 1em;
}
テキストが右寄せ、左寄せ
子要素のインライン要素にネガティブマージンをかけます。
div p {
margin-right: -1em;
}
テキストが中央寄せ(1行のみ)
letter-spacingと同じ値をtext-indentで指定します。
div {
letter-spacing: 1em;
text-indent: 1em;
}
テキストが中央寄せ(複数行)
右寄せ、左寄せと同様に子要素のインライン要素にネガティブマージンをかけます。
div p {
margin-right: -1em;
}