letter-spacingで最後の文字の後ろまで間があいてしまう
字間を詰めたり、間をあけることができるCSSの「letter-spacing」ですが、letter-spacingを使った際に最後の文字の後ろまで間があいてしまう問題があります。
1つこの問題の例を示します。
最後の文字の後ろまで間があいてしまう.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
span {
letter-spacing: 1.5em;
}
</style>
</head>
<body>
<p>あいうえお<span>かきくけこ</span>さしすせそ</p>
</body>
</html>結果
いかがでしょうか。上の例だとletter-spacingに小数点を含む1.5emを指定しており、その分「かきくけこ」の内部の字間は空いていますが、最後の文字の「こ」の後ろまでスペースが空いています。
今回はこのletter-spacingの最後の文字の後ろに間があいてしまう問題の対処法をご紹介します。
letter-spacingで最後の文字の後ろまで間があいてしまう問題の対処法
最後の文字の後ろの余白についてはmargin-rightで負の値を入れることで、打ち消すことができます。
margin-rightに負の値を入れる.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
span {
letter-spacing: 1.5em;
margin-right: -1.5em;
}
</style>
</head>
<body>
<p>あいうえお<span>かきくけこ</span>さしすせそ</p>
</body>
</html>結果
いかがでしょうか。これで「こ」の後ろのスペースが消えました。インライン要素でないと上手くいかないので、もしこの問題がブロック要素で発生した場合は「display: inline;」でインライン要素化したり、別のタグにかえて対処しましょう。