CSS 単語の間隔を指定するサンプル(word-spaceing)

CSSの単語の間隔を指定するサンプルです。
word-spaceingプロパティを使用します。

word-spaceing プロパティ

word-spaceing : 値

値	説明
数値 + 単位	指定した単位で設定します。
normal	通常の間隔にします。(初期値)
値を継承する

数値+単位にした場合、通常の単語の間隔に、指定した数値+単位のスペースを追加します。
以下はMDNのword-spaceingプロパティのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/word-spacing

サンプル

word-spaceingのサンプルです。
サンプルとして意図的に単語と単語の間にスペースを入れました。その箇所の間隔が広がっています。
単語間にスペースがない場合は、一番下の例のように間隔はあきません。

コード

上記サンプルのコードです。

<style>
#p1{
	word-spacing:normal;
}
#p2{
	word-spacing:5px;
}
#p3{
	word-spacing:20px;
}
#p4{
	word-spacing:20px;
}
p{border:1px solid #000;width:300px;height:30px;
margin-bottom:10px;text-indent:10px;background:LightCyan;}
</style>

<p id="p1">単語 の 間隔 normal です</p>
<p id="p2">単語 の 間隔 5px です</p>
<p id="p3">単語 の 間隔 20px です</p>
<p id="p4">単語の間隔です</p>

21行目のように単語の間に空白がない場合は、間隔はあきません。