CSS letter-spacing property

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

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

書式

letter-spacing: space

属性値

space
各文字間のスペースの大きさを数値と単位で指定するか、次に示す値を指定します。
意味
normal通常(初期値)
inherit継承

初期値

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

単位

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

単位
単位 意味 説明
em フォントサイズ
rem root em ドキュメントのルート要素のフォントサイズ
cm centimeters 1cm
mm millimeters 1mm
Q 級 (quarter-millimeters) 0.25mm
in inches 1 inch
pc picas 1/6 inch
pt points 1/72 inch
px pixels 1/96 inch
% percent パーセント

使用例と表示サンプル

次にスタイルシート属性 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プロパティで指定する。

参考文献

W3C (2021) CSS Text Module Level 3

W3C (2021) CSS: em, px, pt, cm, in…