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を指定しても、最後の文字の隙間を消す事が出来ないのでご注意ください。
