CSS letter-spacing 文字の間隔を指定する

CSSのletter-spacingプロパティで、文字の間隔を指定するサンプルです。

目次

仕様 letter-spacingプロパティの仕様
サンプル letter-spacingのサンプル

letter-spacingプロパティの仕様

letter-spacing : 値

letter-spacingプロパティは、文字の間隔を指定します。

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

letter-spacingのサンプル

letter-spacingのサンプルです。

<style>
#p1{letter-spacing:normal;} /* 標準の間隔 */
#p2{letter-spacing:5px;} /* 5pxを指定 */
#p3{letter-spacing:20px;} /* 20pxを指定 */
p{border:1px solid #000;width:400px;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>

2行目は、normalを指定しています。
3,4行目は、pxを指定しています。

以下のイメージになります。

関連の記事

CSS font-family フォントを指定するサンプル
CSS text-align 文字を左寄せ/右寄せにするサンプル
CSS vertical-align 垂直の位置を指定するサンプル
CSS line-height 行の高さを指定するサンプル
CSS word-spaceing 単語の間隔を指定する
CSS overflow-wrap 単語が表示域を超える時の改行
CSS overflow 表示域を超える場合の表示方法

△上に戻る