The style declarations contained within this page:
.test {background-color: silver;}
.cl1 {margin-left: 10px;}
.cl2 {margin-left: 10px;}
.cl3 {margin-left: 0; width: 50%; margin-right: auto;}
.cl4 {margin-left: auto; width: 50%; margin-right: auto;}
.cl5 {margin-left: auto; width: 50%; margin-right: 0;}
.cl6 {margin-left: auto; width: auto; margin-right: 0;}
.cl7 {margin-left: 0; width: auto; margin-right: auto;}
.cl8 {margin-left: auto; width: auto; margin-right: auto;}
.cl9 {margin-left: auto; width: 100%; margin-right: auto;}
.cl10 {margin-left: 0; padding-left: auto;
width: 50%;
padding-right: auto; margin-right: 0;}
.ruler {padding: 0px; margin: 0px; border-width: 0px;}
p.ruled {background-color: aqua; width: 400px;
border: solid silver 40px; border-width: 0 40px;
padding: 0 40px; margin: 0 40px;}
[test cl1] This 'p' element should be offset ten pixels to the left by its 10 pixel left margin.
[test cl1] This 'p' element should be offset twenty pixels to the left by the 10 pixel left margins on itself and the containing 'div' element, since horizontal margins do not collapse.
[test cl3] This 'p' element has a width of 50%, and due to 'auto' values applied to the right margin, the element should be left justified within its parent. The gray rectangle should therefore appear on the left edge of the viewport (e.g. the browser window). The text inside the gray rectangle should not be centered.
[test cl4] This 'p' element has a width of 50%, and due to 'auto' values applied to the left and right margins, the element should be centered within its parent. The gray rectangle should therefore appear in the middle of the viewport (e.g. the browser window). The text inside the gray rectangle should not be centered.
[test cl5] This element has a width of 50%, and due to 'auto' values applied to the left margin, the element should be right justified within its parent. The gray rectangle should therefore appear on the right edge of the viewport (e.g. the browser window). The text inside the gray rectangle should not be centered.
[test cl6] Since the width is "auto" and the right margin has a length value declared, the left margin becomes zero. This paragraph should have a width of 100% and the text should be left justified.
[test cl7] Since the width is "auto" and the left margin has a length value dclared, the right margin becomes zero. This paragraph should have a width of 100% and the text should be left justified.
[test cl8] Since the width is "auto" and both margins are set to "auto", the margins that are set to "auto" become zero. This paragraph should have a width of 100% and the text should be left justified.
[test cl9] Because this paragraph has width 100%, the auto margins become zero, so it should not be centered.
[test cl10] Since auto is an invalid value for padding, the right-margin of this paragraph should be reset to auto and thus be expanded to 50% and it should only occupy the left half of the viewport.
[ruled] The border, padding, and margins for this 'p' element should line up with the boundaries denoted in the image below; the edges of the light blue background should line up with the boundary between "padding" and "border." There should be no top or bottom margin; the images above and below should be flush with this paragraph.
