margin-collapsing-bug616722-1.html (1638B)
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: 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: 1; 20 column-count: 1; 21 } 22 </style> 23 </head> 24 <body> 25 <div class="columns"> 26 <p style="margin-top:10px">The quick brown fox jumps over the lazy dog.</p> 27 </div> 28 <div class="columns"> 29 <p style="margin-bottom:10px">The quick brown fox jumps over the lazy dog.</p> 30 </div> 31 <div class="columns"> 32 <p style="margin:10px 0">The quick brown fox jumps over the lazy dog.</p> 33 </div> 34 <div class="columns"> 35 <p style="margin:20px 0 10px 0">The quick brown fox jumps over the lazy dog.</p> 36 </div> 37 <div class="columns"> 38 <p style="margin:20px 0 10px 0"></p> 39 </div> 40 41 <div class="columns no-border"> 42 <p style="margin-top:10px">The quick brown fox jumps over the lazy dog.</p> 43 </div> 44 <div class="columns no-border"> 45 <p style="margin-bottom:10px">The quick brown fox jumps over the lazy dog.</p> 46 </div> 47 <div class="columns no-border"> 48 <p style="margin:10px 0">The quick brown fox jumps over the lazy dog.</p> 49 </div> 50 <div class="columns no-border"> 51 <p style="margin:20px 0 10px 0">The quick brown fox jumps over the lazy dog.</p> 52 </div> 53 <div class="columns no-border"> 54 <p style="margin:20px 0 10px 0"></p> 55 </div> 56 57 </body></html>