説明
word-spacingプロパティを使うと英字の単語間隔を大きくしたり、小さくしたりといった設定が出来ます。

word-spacingプロパティは英字の単語間隔を指定出来ます。
word-spacingプロパティを使うと英字の単語間隔を大きくしたり、小さくしたりといった設定が出来ます。
word-spacingプロパティの構文は以下の通りです。
word-spacing: 単語間隔;
単語間隔は以下の設定が出来ます。
指定 | 説明 |
---|---|
nomal | デフォルト |
px | ピクセル |
em | 文字数 |
word-spacingで20pxを指定した利用例は以下の通りです。上の記述がCSS外部ファイル、下の記述がHTMLファイルです。
p {
word-spacing: 20px;
}
<p>This is a pen.</p>
上記を表示すると以下になります。
This is a pen.
単語間が広がっています。
尚、デフォルトのnormalの単語間隔は以下の通りです。
This is a pen.
次は2emを指定した時です。
This is a pen.
マイナスで指定する事も出来ます。以下は-5pxで指定した時です。
This is a pen.
マイナスを大きくすると文字が重なったり、表示が逆転して左方向に記述が表示されたりします。
word-spacingは単語間隔というより半角スペースの幅を広げる動作になります。
このため、日本語や画像等様々な記述の途中に半角スペースがあると影響を受けます。
p {
word-spacing: 4em;
}
<p>これは ペンです。</p>
上記を表示すると以下になります。
これは ペンです。
word-spacingと似たプロパティでletter-spacingがあります。letter-spacingは文字間隔で、word-spacingは単語間隔です。
letter-spacingが1文字1文字の間隔を指定するのに対し、word-spacingは単語単位で間隔を指定するといった違いがあります。
検索付「CSSプロパティ早見表」に戻る
スマホ向け「CSSプロパティ一覧」に戻る
★上ページに含まれるプロパティ