letter-spacing: ***;
- ブラウザ
- 特性
- letter-spacing
letter-spacing は、文字と文字の間隔を指定するプロパティです。
p {
letter-spacing: 0.5em;
}
| プロパティ名 | 値 | 説明 |
|---|---|---|
| letter-spacing | 数値+単位（em 等） | 間隔の大きさを指定 |
初期値は normal（標準）です。
【IEの不具合について】
このスタイルを設定した要素内でbr要素を連続させると、2つ目（偶数個目）のbr要素が無視されてしまいます。例えば、5つのbr要素を連続させた場合は、2番目と4番目のbr要素が無視され、3つ分の改行しか入らなくなります。
br要素に対して letter-spacing: 0 または letter-spacing: normal を指定すると、この不具合を回避することができます。
※IE 8では、上記の不具合は発生しないようです。
文字間隔を調整する際には、スペースを入れるのではなくこのプロパティを使用するようにしましょう。
※スペースで文字間隔を調整すると、音声ブラウザで正しく読み上げられなくなってしまいます。
使用例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>
<style type="text/css">
p.example1 { letter-spacing: 0.3em; }
p.example2 { letter-spacing: 1em; }
p.example3 { letter-spacing: 0.5em; }
p.example4 { letter-spacing: 0.5em; }
p.example4 br { letter-spacing: 0; }
</style>
</head>
<body>
<p>標準の文字間隔</p>
<p class="example1">文字間隔に0.3emを指定</p>
<p class="example2">文字間隔に1emを指定</p>
<p class="example3">IEの不具合を検証<br><br>1つ分の改行しか入らない</p>
<p class="example4">IEの不具合を検証<br><br>2つ分の改行が入る</p>
</body>
</html>
表示例
標準の文字間隔
文字間隔に0.3emを指定
文字間隔に1emを指定
IEの不具合を検証
1つ分の改行しか入らない
IEの不具合を検証
2つ分の改行が入る
- サイト内検索
