margin-collapsing-bug616722-2.html (1820B)
1 <!DOCTYPE html> 2 <html><head> 3 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 4 <title>616722-2</title> 5 6 <style type="text/css"> 7 body,html { margin:0;padding: 10px; font: 20px/1 sans-serif; } 8 p { margin: 3px 0; background:pink; } 9 div { 10 background-color:lime; 11 margin: 0em; 12 border: 1px solid black; 13 } 14 .no-border { 15 border-style: none; 16 } 17 18 .columns { 19 -webkit-column-count: 3; 20 column-count: 3; 21 } 22 </style> 23 </head> 24 <body> 25 <div class="columns no-border" style="margin:10px 0"></div> 26 <div class="columns"> 27 <p style="margin-top:10px">1</p> 28 <p>2</p> 29 <p>3</p> 30 </div> 31 <div class="columns no-border" style="padding:10px 0;background:none"><p></p></div> 32 <div class="columns"> 33 <p style="margin-bottom:10px">1</p> 34 <p>2</p> 35 <p style="margin-bottom:20px">3</p> 36 </div> 37 <div class="columns"> 38 <p style="margin:10px 0">1</p> 39 <p>2</p> 40 <p>3</p> 41 </div> 42 <div class="columns"> 43 <p style="margin:20px 0 10px 0">1</p> 44 <p>2</p> 45 <p>3</p> 46 </div> 47 <div class="columns"> 48 <p style="margin:20px 0 10px 0"></p> 49 <p></p> 50 <p style="margin:20px 0 10px 0"></p> 51 </div> 52 53 <div class="columns no-border"> 54 <p style="margin-top:10px">1</p> 55 <p>2</p> 56 <p style="margin-bottom:20px">3</p> 57 </div> 58 <div class="columns no-border"> 59 <p style="margin-bottom:10px">1</p> 60 <p>2</p> 61 <p>3</p> 62 </div> 63 <div class="columns no-border"> 64 <p style="margin:10px 0">1</p> 65 <p>2</p> 66 <p>3</p> 67 </div> 68 <div class="columns no-border"> 69 <p style="margin:20px 0 10px 0">1</p> 70 <p>2</p> 71 <p style="margin:20px 0 10px 0">3</p> 72 </div> 73 <div class="columns no-border"> 74 <p style="margin:20px 0 10px 0"></p> 75 <p></p> 76 <p style="margin:20px 0 10px 0"></p> 77 </div> 78 79 </body></html>