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 { background-color: yellow
; color: orange
; margin: 1em 0; width: 10em; font: 16px/1 Ahem
; }
8 .one { margin-bottom: 25px; background-color: lime
; }
9 .two { margin-bottom: -10px; background-color: lime
; }
10 img
.b
{ border: 16px yellow
; border-style: solid none
; }
12 <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'">
15 <p>The three diagrams below should be identical:
</p>
16 <p class=
"test"> xxx xxx
<span class=
"one">xxx xxx
</span> xxx xxx
</p>
17 <p class=
"test"> xxx xxx
<span class=
"two">xxx xxx
</span> xxx xxx
</p>
19 <img width=
"48" alt=
"" src=
"support/swatch-orange.png" height=
"48"><img width=
"16" alt=
"" src=
"support/swatch-lime.png" class=
"b" height=
"16"><img width=
"48" alt=
"" src=
"support/swatch-orange.png" height=
"48"><img width=
"48" alt=
"" src=
"support/swatch-yellow.png" height=
"48">