1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4 <title>CSS Multi-column Layout Test: no margin collapsing with its first child block box</title>
5 <link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
6 <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-07-25 -->
7 <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-multi-column-model" title="2. The multi-column model">
8 <link rel="match" href="reference/multicol-collapsing-001-ref.htm">
9 <meta name="flags" content="ahem">
10 <meta name="assert" content="This test checks that the top margin of the first child block box of a multicol element does not collapse with the margin top of such multicol element.">
11 <style type="text/css">
12 body > div
13 {
14 background-color: black;
15 border: black solid 1px;
16 font: 1.25em/1 Ahem;
17 width: 10em;
18 }
19
20 div > div
21 {
22 background-color: yellow;
23 color: black;
24 margin: 1em;
25 width: 8em;
26 orphans: 1;
27 widows: 1;
28
29 column-count: 3;
30 column-gap: 1em;
31 }
32
33 h4
34 {
35 font: inherit;
36 margin: 1em 0 0;
37 }
38 </style>
39 </head>
40 <body>
41 <div>
42 <div>
43 <h4>ab cd</h4>
44 ef gh
45 ij kl
46 mn oq
47 </div>
48 </div>
49 </body>
50 </html>