セルフバックで3万円の臨時収入を手に入れよう!

letter-spacingで最後の文字にも隙間が出来る問題を解決

cssで文字間を空けたい時には「letter-spacing」を使用すると思いますが
これを普通に使用すると最後の文字にも隙間が出来てしまい、デザインが崩れてしまいます。
今回はその最後の文字の隙間を消して、デザインが崩れないようにしていきます。

この画像の上段はletter-spacingのみを指定しているので、背景色が右に飛び出しています。
下段はletter-spacingと「margin-right」の2つ指定しているので、デザインが崩れる事なく表示されています。

letter-spacingで指定した分の数値をmargin-rightでマイナスで指定します。

letter-spacing:1em; であれば margin-right:-1em;
letter-spacing:2em; であれば margin-right:-2em;

このように文字をspanタグで囲み、spanにmargin-rightを指定します。
インライン要素でなければmargin-rightを指定しても、最後の文字の隙間を消す事が出来ないのでご注意ください。