1
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN">
4 <title>CSS
2.1 Test Suite: margin-bottom
</title>
5 <script src=
"../resources/ahem.js"></script>
6 <style type=
"text/css">
7 .test { font: 10px/1 Ahem
; width: 10em; border: solid black
; padding: 0; background: yellow
; color: orange
; }
8 .zero {background-color: teal
; margin-bottom: 0;}
9 .one {margin-bottom: 5.29166mm; background-color: aqua
;}
10 .two {margin-bottom: 20px; background-color: blue
;}
11 .three {margin-bottom: 2em; background-color: aqua
;}
12 .four {margin-bottom: 20%; background-color: teal
;}
13 .five {margin-bottom: 20px;}
14 .six {margin-bottom: -10px; background-color: aqua
;}
15 p
, ul
, li
{margin: 0; padding: 0; list-style:none
;}
17 .control { border: solid black
; padding: 0; background: red
; }
18 .control .teal { background: teal
; }
19 .control .aqua { background: aqua
; }
20 .control .blue { background: blue
; }
21 .control .yellow { background: yellow
; }
22 .control .long { width: 70px; height: 10px; background: orange
; }
23 .control .short { width: 40px; height: 10px; background: orange
; }
24 .control .blank { width: 100px; height: 20px; }
26 <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'">
29 <p>The two diagrams below should be identical, with no red present.
</p>
54 <li class=
"five">xxxxxxx
</li>
68 <div class=
"teal"><div class=
"long"></div><div class=
"short"></div></div>
69 <div class=
"aqua"><div class=
"long"></div><div class=
"short"></div></div>
70 <div class=
"yellow"><div class=
"blank"></div></div>
71 <div class=
"blue"><div class=
"long"></div><div class=
"short"></div></div>
72 <div class=
"yellow"><div class=
"blank"></div></div>
73 <div class=
"aqua"><div class=
"long"></div><div class=
"short"></div></div>
74 <div class=
"yellow"><div class=
"blank"></div></div>
75 <div class=
"teal"><div class=
"long"></div><div class=
"short"></div></div>
76 <div class=
"yellow"><div class=
"blank"></div></div>
77 <div class=
"blue"><div class=
"long"></div><div class=
"short"></div><div class=
"long"></div></div>
78 <div class=
"blue"><div class=
"blank"></div></div>
79 <div class=
"blue"><div class=
"short"></div></div>
80 <div class=
"yellow"><div class=
"blank"></div></div>
81 <div class=
"teal"><div class=
"long"></div><div class=
"short"></div></div>
82 <div class=
"aqua"><div class=
"long"></div></div>
83 <div class=
"teal"><div class=
"short"></div></div>