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