CSS1 テストスイート: 5.4.8 line-height


[戻る] [進む] [セクション] [目次] [仕様書]

下記のテキストに適用されるスタイル宣言は、つぎのとおりです。

.one {line-height: 0.5in; font-size: 12px;}
.two {line-height: 2cm; font-size: 12px;}
.three {line-height: 20mm; font-size: 12px;}
.four {line-height: 24pt; font-size: 12px;}
.five {line-height: 2pc; font-size: 12px;}
.six {line-height: 2em; font-size: 12px;}
.seven {line-height: 3ex; font-size: 12px;}
.eight {line-height: 200%; font-size: 12px;}
.nine {line-height: 2; font-size: 12px;}
.ten {line-height: 50px; font-size: 12px;}
.eleven {line-height: -1em; font-size: 12px;}
TABLE .ten {line-height: normal; font-size: 12px;}
DIV {background-color: silver;}
SPAN.color {background-color: silver;}

この文は2分の1インチの行の高さがあるはずです。 これは行の間に余分なスペースを生み出すはずです。

この文は2センチメートルの行の高さがあるはずです。 これは行の間に余分なスペースを生み出すはずです。

この文は20ミリメートルの行の高さがあるはずです。 これは行の間に余分なスペースを生み出すはずです。

この文は24ポイントの行の高さがあるはずです。 これは行の間に余分なスペースを生み出すはずです。

この文は2パイカの行の高さがあるはずです。 これは行の間に余分なスペースを生み出すはずです。

この文は2emの行の高さがあるはずです。 これは行の間に余分なスペースを生み出すはずです。

この文は3exの行の高さがあるはずです。 これは行の間に余分なスペースを生み出すはずです。

この文はフォントサイズの2倍の行の高さがあるはずです。 これは行の間に余分なスペースを生み出すはずです。

この DIV の最初の部分は、フォンサイズの2倍の行の高さがあるはずです。 これは行の間に余分なスペースを生み出すはずです。

この文は DIV のフォントサイズの2倍、あるいは28pxの行の高さがあるはずです。 これは行の間に余分なスペースを生み出さないはずです。 行の高さとフォントサイズとが同じ値を取るはずだからです。

この DIV の二番目の部分は、フォントサイズの2倍の行の高さがあるはずです。 これは行の間に余分なスペースを生み出すはずです。

この文はフォントサイズの2倍の行の高さがあるはずです。 これは行の間に余分なスペースを生み出すはずです。

この DIV の最初の部分は、フォントサイズの2倍の行の高さがあるはずです。 これは行の間に余分なスペースを生み出すはずです。

この文はフォントサイズの2倍の行の高さがあるはずです。 これはインラインスタイルのせいで普通の200%になっています。 これは行の間に余分なスペースを生み出すはずです。 フォントサイズは28pxになり、行の高さは56pxになるからです。

この DIV の二番目の部分は、フォントサイズの2倍の行の高さがあるはずです。 これは行の間に余分なスペースを生み出すはずです。

この段落では最初のセクションは50ピクセルの行の高さがあるはずです。 これは行の間に余分なスペースを生み出すはずです。 二番目のセクション(テーブル内部)では、行の高さは普通のはずです。

この文は普通の行の高さがあるはずです。 負の値はこのプロパティには許されていないからです。

この文は2センチメートルの行の高さがあるはずです。 これは行の間に余分なスペースを生み出すはずです。 テキストには銀色の背景色がありますが、パディングやボーダーはありません。 背景色はインライン要素に設定されていますから、テキストだけをカバーし、行間のスペースはカバーしないはずです。

TABLEテストコーナー
 

この文は2分の1インチの行の高さがあるはずです。 これは行の間に余分なスペースを生み出すはずです。

この文は2センチメートルの行の高さがあるはずです。 これは行の間に余分なスペースを生み出すはずです。

この文は20ミリメートルの行の高さがあるはずです。 これは行の間に余分なスペースを生み出すはずです。

この文は24ポイントの行の高さがあるはずです。 これは行の間に余分なスペースを生み出すはずです。

この文は2パイカの行の高さがあるはずです。 これは行の間に余分なスペースを生み出すはずです。

この文は2emの行の高さがあるはずです。 これは行の間に余分なスペースを生み出すはずです。

この文は3exの行の高さがあるはずです。 これは行の間に余分なスペースを生み出すはずです。

この文はフォントサイズの2倍の行の高さがあるはずです。 これは行の間に余分なスペースを生み出すはずです。

この DIV の最初の部分は、フォンサイズの2倍の行の高さがあるはずです。 これは行の間に余分なスペースを生み出すはずです。

この文は DIV のフォントサイズの2倍、あるいは28pxの行の高さがあるはずです。 これは行の間に余分なスペースを生み出さないはずです。 行の高さとフォントサイズとが同じ値を取るはずだからです。

この DIV の二番目の部分は、フォントサイズの2倍の行の高さがあるはずです。 これは行の間に余分なスペースを生み出すはずです。

この文はフォントサイズの2倍の行の高さがあるはずです。 これは行の間に余分なスペースを生み出すはずです。

この DIV の最初の部分は、フォントサイズの2倍の行の高さがあるはずです。 これは行の間に余分なスペースを生み出すはずです。

この文はフォントサイズの2倍の行の高さがあるはずです。 これはインラインスタイルのせいで普通の200%になっています。 これは行の間に余分なスペースを生み出すはずです。 フォントサイズは28pxになり、行の高さは56pxになるからです。

この DIV の二番目の部分は、フォントサイズの2倍の行の高さがあるはずです。 これは行の間に余分なスペースを生み出すはずです。

この段落では最初のセクションは50ピクセルの行の高さがあるはずです。 これは行の間に余分なスペースを生み出すはずです。 二番目のセクション(テーブル内部)では、行の高さは普通のはずです。

この文は普通の行の高さがあるはずです。 負の値はこのプロパティには許されていないからです。

この文は2センチメートルの行の高さがあるはずです。 これは行の間に余分なスペースを生み出すはずです。 テキストには銀色の背景色がありますが、パディングやボーダーはありません。 背景色はインライン要素に設定されていますから、テキストだけをカバーし、行間のスペースはカバーしないはずです。


[戻る] [進む] [セクション] [目次] [仕様書]