CSS1 テストスイート: 5.5.05 margin

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

.zero {background-color: silver; margin: 0;}
.one {margin: 0.5in; background-color: aqua;}
.two {margin: 25px; background-color: aqua;}
.three {margin: 5em; background-color: aqua;}
.four {margin: 25%; background-color: aqua;}
.five {margin: 25px;}
.six {margin: -10px; background-color: aqua;}

註: 以下のテストは、CSS1仕様書の section 4.1.1 で説明されているマージン折り畳みを防ぐため、zero というクラスの段落で仕切っています。

この要素には zero というクラスがついています。

この文には2分の1インチの全体的マージンがあります。 テストするためには、余分なテキストが必要になるでしょう。

この要素には zero というクラスがついています。

この文には25ピクセルの全体的マージンがあります。 テストするためには、余分なテキストが必要になるでしょう。

この要素には zero というクラスがついています。

この文には5emの全体的マージンがあります。 テストするためには、余分なテキストが必要になるでしょう。

この要素には zero というクラスがついています。

この文には25%の全体的マージンがあります。 これは親要素の幅との関係で計算されます。 テストするためには、余分なテキストが必要となるでしょう。

この要素には zero というクラスがついています。

• このリストには25pxのマージンと明るい青色の背景とがあります。
• そのため、リストにはそうしたマージンがついているはずです。
• このリストには25pxのマージンがついていますから、リスト項目は何らかの形でずらされるはずです。
• このリスト項目には特別なスタイルは適用されていません。

この要素には zero というクラスがついています。

この段落には-10pxという全体的マージンがついていますから、普通よりも横幅が広くなり、段落は上方向にずれ、後続のテキストをその段落に向かって引き上げるはずです。 また明るい青色の背景がついています。 しかしながら、その他の面ではすべて、要素は普通のもののはずです。 負のマージンと背景色とを除き、スタイルは適用されていません。

この要素には zero というクラスがついています。