The style declarations which apply to the text below are:
.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: auto; width: 50%; background-color: gray;}
.six {margin-left: auto; margin-right: auto; width: 50%; background-color: gray;}
.seven {margin: auto; width: 100%; background-color: gray;}
This sentence should have an overall margin of half an inch, which will require extra text in order to test.
This sentence should have an overall margin of 25 pixels, which will require extra text in order to test.
This sentence should have an overall margin of 5 em, which will require extra text in order to test.
This sentence should have an overall margin of 25%, which will require extra text in order to test.
This element has a width of 50%, and due to 'auto' values applied to the 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.
This 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.
This element should NOT be centered, because its width is defined as 100% (but this can only be considered a fair test if the previous two elements are centered).
|
This sentence should have an overall margin of half an inch, which will require extra text in order to test. This sentence should have an overall margin of 25 pixels, which will require extra text in order to test. This sentence should have an overall margin of 5 em, which will require extra text in order to test. This sentence should have an overall margin of 25%, which will require extra text in order to test. This element has a width of 50%, and due to 'auto' values applied to the 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. This 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. This element should NOT be centered, because its width is defined as 100% (but this can only be considered a fair test if the previous two elements are centered). |