multicol-margin-003.html (1323B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <title>CSS Multi-column Layout Test: multi-column and margin bottom of last child</title> 5 <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> 6 <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> 7 <link rel="help" href="https://drafts.csswg.org/css-multicol-1/#the-multi-column-model"> 8 <link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> 9 <meta name="assert" content="This test checks the margin-bottom of the last child of a multi-column should not affect its parent's margin-bottom."> 10 11 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 12 <style> 13 article { 14 font: 25px/25px Ahem; 15 color: green; 16 background-color: green; 17 width: 100px; 18 column-count: 2; 19 column-gap: 0; 20 margin-bottom: 0; 21 orphans: 1; 22 widows: 1; 23 } 24 25 article div:last-child { 26 margin-bottom: 13px; 27 } 28 </style> 29 30 <body> 31 <p>Test passes if there is a filled green square.</p> 32 <article> 33 <div>a1 a2 a3 a4</div> 34 <div>a5</div> 35 </article> 36 <article>b1 b2</article> 37 38 <!-- 39 Expected result: 40 41 |------+------| 42 | a1 | a4 | 43 | a2 | a5 | 44 | a3 |margin| 45 |------+------| 46 | b1 | b2 | 47 |------+------| 48 --> 49 </body> 50 </html>