CSS 文字の間隔を指定するサンプル(letter-spacing) |

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

letter-spacing プロパティ

letter-spacing : 値

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

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

サンプル

letter-spacingのサンプルです。

1番上は、normalです。通常の間隔です。
2番目は、5pxを指定しています。
3番目は、20pxを指定しています。

コード

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

<style>
#p1{
	letter-spacing:normal;
}
#p2{
	letter-spacing:5px;
}
#p3{
	letter-spacing: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>