CSS1 テストスイート: 5.5.02 margin-right


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

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

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

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

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

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

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

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

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

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

TABLEテストコーナー
 

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

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

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

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

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

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

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

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


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