LoginSignup
1
0

More than 3 years have passed since last update.

letter-spacingで文字間をつけたときに文字位置がずれるときの対処法

Last updated at Posted at 2019-05-04

letter-spacingは文字間を調整するCSSプロパティで文字の後ろのスペースを調整します。
そのため、値分の文字の後ろにできたスペースのせいでずれてるように見えることがあります。
文字の折返しで揃えているとき、文字を中央寄せしたときなどに気になる部分で意外と困りますよね?

<div>
  <p>あいうえお<strong>かきくけこ</strong>さしすせそ</p>  
</div>
div {
    letter-spacing: 1em;
}

デモはこちら

テキストが右寄せ、左寄せ

子要素のインライン要素にネガティブマージンをかけます。

div p {
  margin-right: -1em;
}

デモはこちら

テキストが中央寄せ(1行のみ)

letter-spacingと同じ値をtext-indentで指定します。

 div {
  letter-spacing: 1em;
  text-indent: 1em;
 }

デモはこちら

テキストが中央寄せ(複数行)

右寄せ、左寄せと同様に子要素のインライン要素にネガティブマージンをかけます。

div p {
  margin-right: -1em;
}

デモはこちら

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0