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つ分の改行が入る