1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3
4 <head>
5
6 <title>CSS Test: Margin collapsing - margins of a 'collapsed through' box without clearance can collapse with parent block's bottom margin</title>
7
8 <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins">
9 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
10 <link rel="author" title="Daniel Schattenkirchner" href="crazy-daniel{at}gmx.de">
11 <meta content="An element that does not have clearance applied to it can collapse its top margin with its parent block's bottom margin. Margins of a 'collapsed through' box without clearance applied to it can collapse with its parent block's bottom margin. An element with clear set to it (to other than 'none') can only create a clearance if and when there is a preceding floated block." name="assert">
12 <meta content="image" name="flags">
13
14 <style type="text/css">
15 body
16 {
17 background: white url("support/ruler-v-100px-200px-300px.png") no-repeat;
18 margin: 34px 8px 8px 55px; /* max(34px, 16px) + 20px + 20px + 16px + 10px = 100px */
19 }
20
21 p
22 {
23 font-size: 16px;
24 line-height: 20px;
25 margin: 1em 8px;
26 }
27
28 #parent-block
29 {
30 margin-bottom: 100px;
31 }
32
33 .vertical-gap-separator
34 {
35 background-color: green;
36 height: 10px;
37 }
38
39 #element-without-clearance-applied
40 {
41 clear: both;
42 margin-top: 100px;
43 }
44 </style>
45
46 </head>
47
48 <body>
49
50 <p>Below, there should a vertical gap of<br>
51 exactly 100px between 2 green bars.</p>
52
53 <div id="parent-block">
54 <div class="vertical-gap-separator"></div>
55 <div id="element-without-clearance-applied"></div>
56 </div>
57
58 <div class="vertical-gap-separator"></div>
59
60 <!--
61 #element-without-clearance-applied's margin-top should collapse with #parent-block's margin-bottom: max(100px, 100px) = 100px
62 -->
63
64 </body>
65 </html>