CSS letter-spacing

スタイルシート属性letter-spacingは、各文字間のスペースの大きさを指定します。

すべての要素に対して指定可能。

書式

letter-spacing: space

space

各文字間のスペースの大きさを数値と単位で指定するか、次に示す値を指定します。

値	意味
normal	通常（初期値）
inherit	継承

letter-spacingプロパティの初期値は normal である。

CSSのletter-spacingプロパティで指定する文字の間隔を数値で指定する場合は、次の単位を利用できる。

次にスタイルシート属性 letter-spacing を使用したHTMLの例を示します。

<p style="letter-spacing: normal;">
  The quick brown fox jumps over the lazy dog.
</p>

The quick brown fox jumps over the lazy dog.

<p style="letter-spacing: .25rem;">
  The quick brown fox jumps over the lazy dog.
</p>

The quick brown fox jumps over the lazy dog.

<p style="letter-spacing: .5rem;">
  The quick brown fox jumps over the lazy dog.
</p>

The quick brown fox jumps over the lazy dog.

CSSのletter-spacingプロパティで文字の間隔を指定すると、最後の文字の後にもスペースが空く。

The <em style="letter-spacing: 1em;">quick brown fox</em> jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

最後の文字の後にスペースを空けたくない場合は、右マージンに負の値を指定する。

The <em style="letter-spacing: 1em; margin-right: -1em;">quick brown fox</em> jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

CSSのletter-spacingプロパティは、インライン・ボックスとテキストに適用される。

インライン・ボックスとは、内側の表示タイプがフローである、置換されていないインライン・レベルのボックスである。インライン・ボックスのコンテンツは、インライン・ボックス自体と同じインライン・フォーマットのコンテキストに属する。

CSSのletter-spacingプロパティは、子孫の要素へ継承されていく。

例えば、p要素にletter-spacingプロパティを設定すると、その子要素であるspan要素にも影響が及ぶ。

<p style="letter-spacing: .5em;">
  The <span>quick brown fox</span> jumps over the lazy dog.
</p>

The quick brown fox jumps over the lazy dog.

letter-spacingプロパティにinheritを指定することで、明示的に継承することもできる。

<p style="letter-spacing: .5em;">
  The <span style="letter-spacing: inherit;">quick brown fox</span> jumps over the lazy dog.
</p>

The quick brown fox jumps over the lazy dog.

文字間の間隔はCSSのletter-spacingプロパティで指定するが、単語間の間隔はword-spacingプロパティで指定する。