CSS1 テストスイート: 4.1.2 水平方向のフォーマッティング

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

.ruler {padding: 0px; margin: 0px; border-width: 0px;}
P#ruled {background-color: aqua; width: 400px;
     border-style: solid; border-color: silver;
     border-top-width: 0px; border-bottom-width: 0px;
     border-left-width: 40px; border-right-width: 40px;
     padding-left: 40px; padding-right: 40px;
     margin-top: 0px; margin-bottom: 0px; margin-left: 40px; margin-right: 40px;}

P.one {margin-left: 10px;}
DIV.two {margin-left: 10px;}
P.three {margin-left: 0; width: 50%; margin-right: auto;
         background-color: gray;}
P.four {margin-left: auto; width: 50%; margin-right: auto;
        background-color: gray;}
P.five {margin-left: auto; width: 50%; margin-right: 0;
        background-color: gray;}
P.six {margin-left: auto; width: auto; margin-right: 0;
       background-color: gray; }
P.seven {margin-left: 0; width: auto; margin-right: auto;
         background-color: gray;}
P.eight {margin-left: auto; width: auto; margin-right: auto;
         background-color: gray;}
P.nine {padding-left: auto; padding-right: auto; margin-left: 0; margin-right: 0;
        width: 50%; background-color: gray;}
P.ten {margin-left: auto; width: 100%; margin-right: auto;
       background-color: gray;}

このテキストは P 要素の内側にあります。 この段落のボーダー、パディング、マージンは、下の画像に示された境界線と並ぶはずです。 明るい青色の背景の縁は、"padding" と "border" との間の境界線と並ぶはずです。 上マージンや下マージンはないはずです。 上下の画像はこの段落と頭が揃っているはずです。

この段落は10ピクセル字下げされているはずです。

この要素は50%の横幅で、'auto' 値が右マージンに適用されるため、要素はその親要素の中で左寄せされているはずです。 したがって灰色の長方形がビューポート(たとえばブラウザのウインドウ)の左縁に出現するはずです。 灰色の長方形の中にあるテキストは中央寄せされないはずです。

この要素は50%の横幅で、'auto' 値が左マージンと右マージンとに適用されるため、要素はその親要素の中で中央寄せされているはずです。 したがって灰色の長方形がビューポート(たとえばブラウザのウインドウ)の中央に出現するはずです。 灰色の長方形の中にあるテキストは中央寄せされないはずです。

この要素は50%の横幅で、'auto' 値が左マージンに適用されるため、要素はその親要素の中で右寄せされているはずです。 したがって灰色の長方形がビューポート(たとえばブラウザのウインドウ)の右縁に出現するはずです。 灰色の長方形の中にあるテキストは中央寄せされないはずです。

横幅が "auto" ですから "auto" に設定されたマージンは 0 になるので、この段落は横幅100%になるはずで、またテキストは左寄せされるはずです。

横幅が "auto" ですから "auto" に設定されたマージンは 0 になるので、この段落は横幅100%になるはずで、またテキストは左寄せされるはずです。

横幅が "auto" ですから "auto" に設定されたマージンは 0 になるので、この段落は横幅100%になるはずで、またテキストは左寄せされるはずです。

auto はパディングについては不当な値なので、この段落の right-margin は auto にリセットされ、そのため 50% に展開されるはずで、ビューポートの左半分だけを占有するはずです。

この段落は100%の横幅をもつので、auto マージンは 0 になり、そのため中央寄せはされないはずです。

TABLEテストコーナー

このテキストは P 要素の内側にあります。 この段落のボーダー、パディング、マージンは、下の画像に示された境界線と並ぶはずです。 明るい青色の背景の縁は、"padding" と "border" との間の境界線と並ぶはずです。 上マージンや下マージンはないはずです。 上下の画像はこの段落と頭が揃っているはずです。 この段落は10ピクセル字下げされているはずです。 この段落は20ピクセル字下げされているはずです。 水平方向のマージンは折り畳まれないからです。 この要素は50%の横幅で、'auto' 値が右マージンに適用されるため、要素はその親要素の中で左寄せされているはずです。 したがって灰色の長方形がビューポート(たとえばブラウザのウインドウ)の左縁に出現するはずです。 灰色の長方形の中にあるテキストは中央寄せされないはずです。 この要素は50%の横幅で、'auto' 値が左マージンと右マージンとに適用されるため、要素はその親要素の中で中央寄せされているはずです。 したがって灰色の長方形がビューポート(たとえばブラウザのウインドウ)の中央に出現するはずです。 灰色の長方形の中にあるテキストは中央寄せされないはずです。 この要素は50%の横幅で、'auto' 値が左マージンに適用されるため、要素はその親要素の中で右寄せされているはずです。 したがって灰色の長方形がビューポート(たとえばブラウザのウインドウ)の右縁に出現するはずです。 灰色の長方形の中にあるテキストは中央寄せされないはずです。 横幅が "auto" ですから "auto" に設定されたマージンは 0 になるので、この段落は横幅100%になるはずで、またテキストは左寄せされるはずです。 横幅が "auto" ですから "auto" に設定されたマージンは 0 になるので、この段落は横幅100%になるはずで、またテキストは左寄せされるはずです。 横幅が "auto" ですから "auto" に設定されたマージンは 0 になるので、この段落は横幅100%になるはずで、またテキストは左寄せされるはずです。 auto はパディングについては不当な値なので、この段落の right-margin は auto にリセットされ、そのため 50% に展開されるはずで、ビューポートの左半分だけを占有するはずです。 この段落は100%の横幅をもつので、auto マージンは 0 になり、そのため中央寄せはされないはずです。