136 lines
6.1 KiB
HTML
136 lines
6.1 KiB
HTML
<!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>
|