1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4 <title>CSS Test: Vertical Formatting</title>
5 <link rel="help" href="http://www.w3.org/TR/REC-CSS1#vertical-formatting">
6 <link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html">
7 <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch">
8 <style type="text/css">
9
10 /* test */
11 p.one { margin-top: 0; margin-bottom: 2cm; }
12 p.two { margin-top: 2cm; margin-bottom: 0; }
13 p.three { margin-top: 0; margin-bottom: 0; }
14 p.four { margin-top: -1cm; margin-bottom: 0; }
15 div.five { margin-top: 1cm; margin-bottom: 1cm; padding-top: 1cm; }
16 p.six { margin-top: 1cm; margin-bottom: 1cm; }
17 p.seven { margin-top: 1cm; margin-bottom: 0; }
18 p.eight { margin-top: 0; margin-bottom: -1cm; padding-bottom: 2cm; }
19 p.nine { margin-top: -1cm; margin-bottom: 1cm; padding-top: 1cm; }
20 p.ten { margin-top: 1cm; margin-bottom: 0; float: left; width: 50%; }
21 p.eleven { margin-top: 1cm; margin-bottom: 0; }
22 p.twelve { margin-top: 0; margin-bottom: 0; padding-bottom: 1cm; clear: both; }
23 p.thirteen { margin-top: 0; margin-bottom: 0; padding-top: 1cm; }
24
25 /* control */
26 td { width: 5em; padding: 0; border: solid; }
27 .p { margin: 0; padding: 0; height: auto; }
28 .h1 { margin: 0; padding: 0; height: 1cm; }
29 .h2 { margin: 0; padding: 0; height: 2cm; }
30 .h3 { margin: 0; padding: 0; height: 3cm; }
31 .w50 { width: 50%; }
32 .l50 { margin-left: 50%; }
33 .contain { position: relative; } /* XXX relies on CSS2 stuff */
34 .bottom { position: absolute; bottom: 0; }
35 .left { position: absolute; left: 0; }
36
37 /* colours */
38 .teal, .test { background: teal; }
39 .yellow, .one, .seven, .thirteen { background: yellow; }
40 .fuchsia, .two, .eight { background: fuchsia; }
41 .lime, .three, .nine { background: lime; }
42 .white, .four, .ten { background: white; }
43 .aqua, .five, .eleven { background: aqua; }
44 .orange, .six, .twelve { background: orange; }
45
46 </style>
47 <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins" title="8.3.1 Collapsing margins">
48 <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#margin-properties" title="8.3 Margin properties: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', and 'margin'">
49 <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#padding-properties" title="8.4 Padding properties: 'padding-top', 'padding-right', 'padding-bottom', 'padding-left', and 'padding'">
50 </head>
51 <body>
52 <p>The two columns below should be identical.</p>
53 <table>
54 <tr>
55 <td class="test">
56 <p class="one"> - </p>
57 <p class="two"> - </p>
58 <p class="one"> - </p>
59 <p class="three"> - </p>
60 <p class="one"> - </p>
61 <p class="four"> - </p>
62 <div class="five">
63 <p class="six"> - </p>
64 </div>
65 <p class="seven"> - </p>
66 <p class="eight"> - </p>
67 <p class="nine"> - </p>
68 <p class="ten"> - </p>
69 <p class="eleven"> - </p>
70 <p class="twelve"> - </p>
71 <p class="thirteen"> - </p>
72 </td>
73 <td class="control">
74 <div class="yellow p">-</div>
75 <div class="teal h2"></div>
76 <div class="fuchsia p">-</div>
77 <div class="yellow p">-</div>
78 <div class="teal h2"></div>
79 <div class="lime p">-</div>
80 <div class="yellow p">-</div>
81 <div class="teal h1"></div>
82 <div class="white p">-</div>
83 <div class="teal h1"></div>
84 <div class="aqua h2"></div>
85 <div class="orange p">-</div>
86 <div class="teal h1"></div>
87 <div class="yellow p">-</div>
88 <div class="fuchsia p">-</div>
89 <div class="fuchsia h1"></div>
90 <div class="lime h1"></div>
91 <div class="lime p">-</div>
92 <div class="teal h1"></div>
93 <div class="aqua"><div class="l50 p">-</div></div>
94 <div class="teal h1 contain"><div class="white p bottom left w50">-</div></div>
95 <div class="orange p">-</div>
96 <div class="orange h1"></div>
97 <div class="yellow h1"></div>
98 <div class="yellow p">-</div>
99 </td>
100 </tr>
101 </table>
102 </body>
103 </html>