タイトルにletter-spacingをつけたけど、カンプと比べて若干ずれてしまうのはなんでだろう？？
下記のようなイメージです。
これ実はletter-spacingをつけていることが原因です。
目次
letter-spacingは後ろにスペースがつく
letter-spacingは文字の後ろに余白をつけるcss
後ろに余白をつけるので、若干中心からずれてしまうのです。
したがって対処法としては、text-indentで行の初めに同じ幅の余白をつけることで対応します。
コード
さて実際のサンプルコードを添付します。
See the Pen Untitled by YT (@YT-the-scripter) on CodePen.
1行目：何も指定をしていないタイトル
2行目：letter-spacing: 0.5em;→文末に余白ができている。
3行目：text-indent: 0.5;→文頭に余白ができている。
4行目：両方適用（letter-spacing: 0.5em;、text-indent: 0.5;）→中心に配置されている。
letter-spacingとtext-indentを併用することで、ピッタリと中心に配置できることがわかります。
まとめ
今回は、タイトルがなぜかデザインカンプとずれてしまう原因について解説しました。
letter-spacingで文末にも余白がついてしまうという事が原因でした。
text-indentと併用する事で中心に配置できます。
今回の記事が参考になれば幸いです。
コメント