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</title>
7
8 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
9 <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins">
10 <meta name="flags" content="">
11 <meta content="Adjoining of vertical (top and bottom) margins must be determined only after resolving percentage padding-top and padding-bottom values." name="assert">
12
13 <style type="text/css">
14 div#grand-parent-block-container
15 {
16 background-color: red;
17 border: black solid medium;
18 /* Such border prevents margin collapsing with the body vertical margins */
19 }
20
21 div#parent-block-container
22 {
23 background-color: lime;
24 padding: 2%;
25 }
26
27 div#child-block {margin: 100px 0px;}
28
29 /*
30 In this testcase, div#child-block's vertical (top and bottom)
31 margins should collapse with div#parent-block-container's vertical
32 (top and bottom) margins because div#child-block has no used
33 padding-top and no used padding-bottom. On the other hand,
34 div#parent-block-container's vertical (top and bottom) margins
35 should NOT collapse with div#grand-parent-block-container's vertical
36 (top and bottom) margins because div#parent-block-container, after
37 resolving percentage values, has an used padding-top value and an used
38 padding-bottom value.
39 */
40 </style>
41
42 </head>
43
44 <body>
45
46 <div id="grand-parent-block-container">
47 <div id="parent-block-container">
48 <div id="child-block">
49 There should be <strong>no red</strong> in this page
50 </div>
51 </div>
52 </div>
53
54 </body>
55 </html>