CSS1 テストスイート: 5.5.04 margin-left


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

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

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

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

この文には2分の1インチの左マージンがあるはずです。

この文には25ピクセルの左マージンがあるはずです。

この文には5emの左マージンがあるはずです。

この文には25%の左マージンがあるはずです。 これは親要素の幅との関係で計算されます。

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

この段落には-10pxの左マージンがあるので、これがない場合よりも段落が広くなっているはずです。 またこの段落には明るい青色の背景がついています。 しかしながら、その他の面ではすべて、要素は普通のもののはずです。 負の左マージンと背景色とを除いては、スタイルは適用されていません。

TABLEテストコーナー
 

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

この文には2分の1インチの左マージンがあるはずです。

この文には25ピクセルの左マージンがあるはずです。

この文には5emの左マージンがあるはずです。

この文には25%の左マージンがあるはずです。 これは親要素の幅との関係で計算されます。

  • この無順序リストの左マージンは25ピクセルに設定されており、その背景色は灰色に設定されています。
  • そうしたものを二重にチェックする必要があることを考えると、もう一つリスト項目置くこともそう悪い考えではないかもしれません。 このリスト項目にも25ピクセルに設定された左マージンがありますから、リストのマージンと組み合わさって50ピクセルのマージンになるはずです。 背景は白色に設定されています。
  • これはクラスのついていないリスト項目です。

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

この段落には-10pxの左マージンがあるので、これがない場合よりも段落が広くなっているはずです。 またこの段落には明るい青色の背景がついています。 しかしながら、その他の面ではすべて、要素は普通のもののはずです。 負の左マージンと背景色とを除いては、スタイルは適用されていません。


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