くまだどうも、くまだです。
letter-spacinを指定したときの、最後の文字の右余白の調整メモ。
【CSS】letter-spacing指定したときの文字の最後の余白を消す
下記のようにテキストにletter-spacingを指定することはよくあることだと思いますが、letter-spacing指定すると、最後の文字の右側にも余白ができてしまいます。
<p class="p-text">テキストテキスト</p>.p-text {
font-size: 20px;
line-height: 1.4;
letter-spacing: 1em;
display: block;
}
「ト」の右側にも余白あり。これだけだとさほど問題ないのですが、例えば下記のようにテキストを中央寄せしたり右寄せしたときに、余白のせいでその位置にテキストが微妙にいかない。
<div class="p-box">
<p class="p-text">テキストテキスト</p>
</div>.p-text {
font-size: 20px;
line-height: 1.4;
letter-spacing: 1em;
display: inline-block;
}
.p-box {
min-width: 400px;
border: 1px solid black;
padding: 12px 14px;
text-align: center;
}
テキストの右側余白のほうが広いです。
テキストを右寄せにした場合でも、p-boxのpadding＋「ト」の右余白分だけ膨らんでいます。
これらの修正は、
〇 中央寄背の場合
.p-text {
font-size: 20px;
line-height: 1.4;
letter-spacing: 1em;
display: inline-block;
/* 追記 */
text-indent: 1em;
}
p-textにtext-indentをletter-spacingと同じ値で追加します。これでテキストの右側も左側も同じ余白になりました。
〇 右寄せの場合
.p-text {
font-size: 20px;
line-height: 1.4;
letter-spacing: 1em;
display: inline-block;
/* 追記 */
margin-right: -1em;
}
ネガティブマージンを指定。右寄せにできました。
厳密にはテキストの右側余白が消えたわけではなく、見かけ上そう見えるように修正しているだけなので注意です。
ここまで読んでくださりありがとうございました。