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: multicolumn and nested margins</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-08-11 -->
7 <link rel="help" href="http://www.w3.org/TR/css3-multicol/#pagination-and-overflow-outside-multicol" title="8.2. Pagination and overflow outside multicol elements">
8 <link rel="match" href="reference/multicol-nested-margin-001-ref.htm">
9 <meta name="flags" content="ahem">
10 <meta name="assert" content="This test checks that non-zero vertical margins can be applied on a multi-column element while the vertical margins of its own block containers can be set to zero.">
11 <style type="text/css">
12 body {margin: 0em;}
13
14 body > div
15 {
16 font: 1.25em/1 Ahem;
17 width: 32em;
18
19 column-count: 3;
20 column-gap: 1em;
21 }
22
23 /*
24
25 N == 3;
26
27 W == ((available-width + column-gap) / N) - column-gap;
28 W == ((32em + 1em) / 3) - 1em;
29 W == (33em / 3) - 1em;
30 W == (11em) - 1em;
31 W == 10em;
32
33 */
34
35 div
36 {
37 background: yellow;
38 color: black;
39 margin: 1em;
40 orphans: 1;
41 widows: 1;
42 }
43
44 div > div {margin: 0em 1em;}
45
46 div div:nth-child(2) {color: pink;}
47
48 div div:nth-child(3) {color: blue;}
49 </style>
50 </head>
51
52 <body>
53
54 <div>
55 <div>
56 bl ac
57 bl ac
58 bl ac
59 bl ac
60 </div>
61 <div>
62 Pi nk
63 Pi nk
64 Pi nk
65 Pi nk
66 </div>
67 <div>
68 bl ue
69 bl ue
70 bl ue
71 bl ue
72 </div>
73 </div>
74
75 </body>
76 </html>