| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> |
| <HTML> |
| <HEAD> |
| <TITLE>CSS1 Test Suite: 4.1.1 Vertical Formatting</TITLE> |
| <META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> |
| <META http-equiv="Content-Style-Type" content="text/css"> |
| |
| <LINK rel="stylesheet" type="text/css" media="screen" href="../resources/base.css"> |
| <STYLE type="text/css"> |
| P.one {margin-bottom: 2cm; padding-bottom: 0;} |
| P.two {margin-top: 2cm; padding-top: 0;} |
| P.three {margin-top: 0; padding-top: 0;} |
| P.four {margin-top: -1cm; margin-bottom: 0; |
| padding-top: 0; padding-bottom: 0;} |
| DIV.five {margin-top: 1cm; margin-bottom: 1cm; |
| padding-top: 1cm; padding-bottom: 0;} |
| P.six {margin-top: 1cm; margin-bottom: 1cm; |
| padding-top: 0; padding-bottom: 0;} |
| P.seven {margin-top: 1cm; padding-top: 0;} |
| P.eight {margin-bottom: -1cm; padding-bottom: 2cm;} |
| P.nine {margin-top: -1cm; padding-top: 1cm; |
| padding-bottom: 0; margin-bottom: 1cm;} |
| P.ten {margin-top: 1cm;padding-top: 0; |
| float: left;width: 50%;} |
| P.eleven {margin-top: 1cm; padding-top: 0; clear: none;} |
| P.twelve {margin-bottom: 0; padding-bottom: 1cm; clear: both;} |
| P.thirteen {margin-top: 0; padding-top: 1cm;} |
| TABLE {clear: both;} |
| </STYLE> |
| |
| </HEAD> |
| |
| <BODY><P>The style declarations which apply to the text below are:</P> |
| <PRE>P.one {margin-bottom: 2cm; padding-bottom: 0;} |
| P.two {margin-top: 2cm; padding-top: 0;} |
| P.three {margin-top: 0; padding-top: 0;} |
| P.four {margin-top: -1cm; margin-bottom: 0; |
| padding-top: 0; padding-bottom: 0;} |
| DIV.five {margin-top: 1cm; margin-bottom: 1cm; |
| padding-top: 1cm; padding-bottom: 0;} |
| P.six {margin-top: 1cm; margin-bottom: 1cm; |
| padding-top: 0; padding-bottom: 0;} |
| P.seven {margin-top: 1cm; padding-top: 0;} |
| P.eight {margin-bottom: -1cm; padding-bottom: 2cm;} |
| P.nine {margin-top: -1cm; padding-top: 1cm; |
| padding-bottom: 0; margin-bottom: 1cm;} |
| P.ten {margin-top: 1cm;padding-top: 0; |
| float: left;width: 50%;} |
| P.eleven {margin-top: 1cm; padding-top: 0; clear: none;} |
| P.twelve {margin-bottom: 0; padding-bottom: 1cm; clear: both;} |
| P.thirteen {margin-top: 0; padding-top: 1cm;} |
| TABLE {clear: both;} |
| |
| </PRE> |
| <HR> |
| <P CLASS="one">There should be a two-centimeter margin between this paragraph and the next, because adjacent vertical margins should collapse to the maximum of the margins.</P> |
| |
| <P CLASS="two">This is another paragraph.</P> |
| |
| <P CLASS="one">There should be a two-centimeter margin between this paragraph and the next.</P> |
| |
| <P CLASS="three">This is another paragraph.</P> |
| |
| <P CLASS="one">There should be a one-centimeter margin between this paragraph and the next, because when there is one negative margin, the two margins should be added (the minus sign should be kept).</P> |
| |
| <P CLASS="four">This is another paragraph.</P> |
| |
| <DIV CLASS="five"> |
| <P CLASS="six"> |
| There should be three centimeters between this text and the text above, |
| but only one centimeter between this text and the text below, because |
| vertical margins of nested elements should collapse only if there is no |
| border or padding between the margins. |
| </P></DIV> |
| |
| <P CLASS="seven">This is more text.</P> |
| |
| <P CLASS="eight">There should be two centimeters between this paragraph and the one below, because negative margins collapse to a negative margin with the largest absolute value of the margins collapsed.</P> |
| |
| <P CLASS="nine">This is a paragraph, which I should make very long so that you can easily see how much space there is between it and the one below it and to the right.</P> |
| |
| <P CLASS="ten">There should be two centimeters between this paragraph and the one above it, since margins do not collapse on floating elements.</P> |
| |
| <P CLASS="eleven">There should be one centimeter between this paragraph and the (non-floating) one above it, since the float should not effect the paragraph spacing.</P> |
| |
| <P CLASS="twelve">There should be two centimeters of padding between |
| this paragraph and the one below. Padding does not collapse, and there |
| is 1cm of padding on each side.</P> |
| |
| <P CLASS="thirteen">This is the next paragraph.</P> |
| |
| |
| <TABLE border cellspacing="0" cellpadding="3" class="tabletest"> |
| <TR> |
| <TD colspan="2" bgcolor="silver"><STRONG>TABLE Testing Section</STRONG></TD> |
| </TR> |
| <TR> |
| <TD bgcolor="silver"> </TD> |
| <TD><P CLASS="one">There should be a two-centimeter margin between this paragraph and the next, because adjacent vertical margins should collapse to the maximum of the margins.</P> |
| |
| <P CLASS="two">This is another paragraph.</P> |
| |
| <P CLASS="one">There should be a two-centimeter margin between this paragraph and the next.</P> |
| |
| <P CLASS="three">This is another paragraph.</P> |
| |
| <P CLASS="one">There should be a one-centimeter margin between this paragraph and the next, because when there is one negative margin, the two margins should be added (the minus sign should be kept).</P> |
| |
| <P CLASS="four">This is another paragraph.</P> |
| |
| <DIV CLASS="five"> |
| <P CLASS="six"> |
| There should be three centimeters between this text and the text above, |
| but only one centimeter between this text and the text below, because |
| vertical margins of nested elements should collapse only if there is no |
| border or padding between the margins. |
| </P></DIV> |
| |
| <P CLASS="seven">This is more text.</P> |
| |
| <P CLASS="eight">There should be two centimeters between this paragraph and the one below, because negative margins collapse to a negative margin with the largest absolute value of the margins collapsed.</P> |
| |
| <P CLASS="nine">This is a paragraph, which I should make very long so that you can easily see how much space there is between it and the one below it and to the right.</P> |
| |
| <P CLASS="ten">There should be two centimeters between this paragraph and the one above it, since margins do not collapse on floating elements.</P> |
| |
| <P CLASS="eleven">There should be one centimeter between this paragraph and the (non-floating) one above it, since the float should not effect the paragraph spacing.</P> |
| |
| <P CLASS="twelve">There should be two centimeters of padding between |
| this paragraph and the one below. Padding does not collapse, and there |
| is 1cm of padding on each side.</P> |
| |
| <P CLASS="thirteen">This is the next paragraph.</P> |
| </TD></TR></TABLE></BODY> |
| </HTML> |
