CSS1 テストスイート: 4.4 行の高さ

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

P.one {font-size: 14px; line-height: 20px;}
IMG.onea {vertical-align: text-bottom;
     width: 200px; height: 200px;}
IMG.oneb {vertical-align: text-top; width: 200px; height: 200px;}

P.two {font-size: 14px; line-height: 20px;}
IMG.twoa {vertical-align: text-bottom; width: 100px; height: 100px;
     padding: 5px; border-style: solid;
     border-width: 10px; margin: 15px;}
IMG.twob {vertical-align: text-top;
          width: 100px; height: 100px;
     padding: 5px; border-style: solid;
     border-width: 10px; margin: 15px;}

IMG.twoc {vertical-align: middle; width: 50px; height: 50px;
     padding: 5px; border-style: solid;
     border-width: 10px; margin: -10px;}

この段落はフォントサイズが14pxで行の高さは20pxのはずです。 これは、その中のテキストの行が6ピクセル離れるはずで、そのうち3ピクセルは各行の行ボックスの一部となるという意味です。 段落の中にあるどの画像も、 や といったように、行ボックスに収まるよう、行ボックスの高さを増やすはずです。 これは、この行が text-top 揃えの画像にぶつからないよう、画像の左下に充分な余裕があることを確かめるための追加のテキストです。

この段落はフォントサイズが14pxで行の高さは20pxのはずです。 これは、その中のテキストの行が6ピクセル離れるはずで、そのうち3ピクセルは各行の行ボックスの一部となるという意味です。 段落の中にあるどの画像も、 や といったように、パディング(5px)やボーダー(10px)、マージン(15px)を含めて行ボックスに収まるよう、行ボックスの高さを増やすはずです。 これは、この行が text-top 揃えの画像にぶつからないよう、画像の左下に充分な余裕があることを確かめるための追加のテキストです。 この段落の中で text-bottom 揃えや text-top 揃えにされているはずなのは、マージンの外縁ですから、最初の画像については、画像の下ボーダーがテキストの下端の15px上で始まるはずですし、その次の画像については、上ボーダーがテキストの上端の15px下で始まるはずです。 この段落の最後の画像には-10pxのマージンが設定されていますから、テキストを画像に向かって垂直方向に引き上げ、また水平方向にも引っ張るはずです。