letter-spacing

letter-spacingは、文字の間隔を指定するスタイルです。

解説

文字の間隔を明示的に指定したい場合に使用します。
（ここでいう文字とは"あ"とか"A"など、１文字１文字の事を指します。）
マイナス値を指定すると、文字が重なって表示されます。

文字ではなく単語単位の間隔を指定したい場合は、word-spacingを使用してください。

構文

構文は以下になります。

値

letter-spacingには以下の値が指定できます。

太字の値は初期値です。

サンプル

文字間隔を10pxにする

.sample01 {
  letter-spacing:10px;
}

<div class="sample01">ここの文字間隔は10pxです。</div>

文字間隔を20pxにする

.sample02 {
  letter-spacing:20px;
}

<div class="sample02">ここの文字間隔は20pxです。</div>

文字間隔を-5pxにする

.sample03 {
  letter-spacing:-5px;
}

<div class="sample03">ここの文字間隔は-5pxです。</div>

マイナスを指定すると文字が重なります。

文字間隔をnormalにする（デフォルト値）

.sample04 {
  letter-spacing:normal;
}

<div class="sample04">ここの文字間隔はnormalです。</div>

備考

• normalサイズの場合は特に指定しなくてもOKです。

関連項目

• word-spacing：単語の間隔を指定する
• white-space：半角スペース、タブ文字、改行の表示方法を指定する

Tweet