1
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN">
4 <title>CSS
2.1 Test Suite: Vertical Formatting
</title>
5 <style type=
"text/css">
8 p
.one
{ margin-top: 0; margin-bottom: 2cm; }
9 p
.two
{ margin-top: 2cm; margin-bottom: 0; }
10 p
.three
{ margin-top: 0; margin-bottom: 0; }
11 p
.four
{ margin-top: -1cm; margin-bottom: 0; }
12 div
.five
{ margin-top: 1cm; margin-bottom: 1cm; padding-top: 1cm; }
13 p
.six
{ margin-top: 1cm; margin-bottom: 1cm; }
14 p
.seven
{ margin-top: 1cm; margin-bottom: 0; }
15 p
.eight
{ margin-top: 0; margin-bottom: -1cm; padding-bottom: 2cm; }
16 p
.nine
{ margin-top: -1cm; margin-bottom: 1cm; padding-top: 1cm; }
17 p
.ten
{ margin-top: 1cm; margin-bottom: 0; float: left
; width: 50%; }
18 p
.eleven
{ margin-top: 1cm; margin-bottom: 0; }
19 p
.twelve
{ margin-top: 0; margin-bottom: 0; padding-bottom: 1cm; clear: both
; }
20 p
.thirteen
{ margin-top: 0; margin-bottom: 0; padding-top: 1cm; }
23 td
{ width: 5em; padding: 0; border: solid
; }
24 .p { margin: 0; padding: 0; height: auto
; }
25 .h1 { margin: 0; padding: 0; height: 1cm; }
26 .h2 { margin: 0; padding: 0; height: 2cm; }
27 .h3 { margin: 0; padding: 0; height: 3cm; }
29 .l50 { margin-left: 50%; }
30 .contain { position: relative
; } /* XXX relies on CSS2 stuff */
31 .bottom { position: absolute
; bottom: 0; }
32 .left { position: absolute
; left: 0; }
35 .teal, .test { background: teal
; }
36 .yellow, .one, .seven, .thirteen { background: yellow
; }
37 .fuchsia, .two, .eight { background: fuchsia
; }
38 .lime, .three, .nine { background: lime
; }
39 .white, .four, .ten { background: white
; }
40 .aqua, .five, .eleven { background: aqua
; }
41 .orange, .six, .twelve { background: orange
; }
44 <link rel=
"help" href=
"http://www.w3.org/TR/CSS21/box.html#collapsing-margins" title=
"8.3.1 Collapsing margins">
45 <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'">
48 <p>The two columns below should be identical.
</p>
52 <p class=
"one"> -
</p>
53 <p class=
"two"> -
</p>
54 <p class=
"one"> -
</p>
55 <p class=
"three"> -
</p>
56 <p class=
"one"> -
</p>
57 <p class=
"four"> -
</p>
59 <p class=
"six"> -
</p>
61 <p class=
"seven"> -
</p>
62 <p class=
"eight"> -
</p>
63 <p class=
"nine"> -
</p>
64 <p class=
"ten"> -
</p>
65 <p class=
"eleven"> -
</p>
66 <p class=
"twelve"> -
</p>
67 <p class=
"thirteen"> -
</p>
70 <div class=
"yellow p">-
</div>
71 <div class=
"teal h2"></div>
72 <div class=
"fuchsia p">-
</div>
73 <div class=
"yellow p">-
</div>
74 <div class=
"teal h2"></div>
75 <div class=
"lime p">-
</div>
76 <div class=
"yellow p">-
</div>
77 <div class=
"teal h1"></div>
78 <div class=
"white p">-
</div>
79 <div class=
"teal h1"></div>
80 <div class=
"aqua h2"></div>
81 <div class=
"orange p">-
</div>
82 <div class=
"teal h1"></div>
83 <div class=
"yellow p">-
</div>
84 <div class=
"fuchsia p">-
</div>
85 <div class=
"fuchsia h1"></div>
86 <div class=
"lime h1"></div>
87 <div class=
"lime p">-
</div>
88 <div class=
"teal h1"></div>
89 <div class=
"aqua"><div class=
"l50 p">-
</div></div>
90 <div class=
"teal h1 contain"><div class=
"white p bottom left w50">-
</div></div>
91 <div class=
"orange p">-
</div>
92 <div class=
"orange h1"></div>
93 <div class=
"yellow h1"></div>
94 <div class=
"yellow p">-
</div>