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

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

letter-spacing プロパティ

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

コード

letter-spacingのサンプルのコードです。
3,6,9,12行目でletter-spacingプロパティを指定しています。

<style>
#box1{
	letter-spacing:normal;
}
#box2{
	letter-spacing:2px;
}
#box3{
	letter-spacing:5px;
}
#box4{
	letter-spacing:10px;
}
#d1 div{font-weight:bold;margin-bottom:5px;
border:1px solid #000;width:100%;height:100px;text-indent:10px;}
</style>
<body >
<div id="d1">
<div id="box1">letter-spacing:normal</div>
<div id="box2">letter-spacing:2px</div>
<div id="box3">letter-spacing:5px</div>
<div id="box4">letter-spacing:10px</div>
</div>
</body>

サンプル

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

letter-spacing:normal
letter-spacing:2px
letter-spacing:5px
letter-spacing:10px

関連の記事

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



△上に戻る