word-spacingプロパティ

TOPページに戻る > CSS

word-spacingプロパティ

単語の間隔を値の分だけ広げる
空白スペースの部分が単語の間隔になります。英単語だけでなく、日本語も空白スペースを入れれば間隔を広げることができます。初期値はnormalです

使い方（書式）

セレクタ { word-spacing: 値; }                                    

word-spacingプロパティ

対応ブラウザ
適用できる要素	全てのhtml要素
子要素へのスタイルの継承	する

プロパティの値	説明
単位	px、emなどの単位。値の数値分広げる
normal	通常の間隔

実際の指定方法

.hoge { word-spacing: 1em; }     /* 単語の間を1文字分の間隔に広げる */

.hoge2 { word-spacing: 0.5em; }   /* 単語の間を文字の半分の間隔に広げる */

.hoge3 { word-spacing: 5px; }     /* 単語の間を5pxの間隔に広げる */

.hoge4 { word-spacing: normal; }  /* 通常の単語の間隔 */

html部分

<p class="hoge">単語 単語の間隔　1em</p>
<p class="hoge2">単語 単語の間隔　0.5em</p>
<p class="hoge3">単語 単語の間隔　5px</p>
<p class="hoge4">単語 単語normal</p>

実際の表示

単語 単語の間隔　1em

単語 単語の間隔　0.5em

単語 単語の間隔　5px

単語 単語normal