margin-collapsing-bug616722-2-ref.html (2017B)
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 .no-border p { margin: 0; } 10 11 .columns { 12 -webkit-column-count: 3; 13 column-count: 3; 14 background-color:lime; 15 margin: 0em; 16 border: 1px solid black; 17 } 18 .no-border { 19 border-width: 0; 20 } 21 </style> 22 </head> 23 <body> 24 <div class="columns no-border" style="padding:10px 0;background:none"></div> 25 <div class="columns"> 26 <div style="padding-top:7px"><p>1</p></div> 27 <p>2</p> 28 <p>3</p> 29 </div> 30 <div class="columns no-border" style="padding:10px 0;background:none"><p></p></div> 31 <div class="columns"> 32 <div style="padding-bottom:10px"><p>1</p></div> 33 <p>2</p> 34 <div style="padding-bottom:17px"><p>3</p></div> 35 </div> 36 <div class="columns"> 37 <div style="padding:7px 0 0 0"><p>1</p></div> 38 <p>2</p> 39 <p>3</p> 40 </div> 41 <div class="columns"> 42 <div style="padding:17px 0 0 0"><p>1</p></div> 43 <p>2</p> 44 <p>3</p> 45 </div> 46 <div class="columns"> 47 <p style="margin:0"></p> 48 <p style="margin:0"></p> 49 <p style="margin:0"></p> 50 </div> 51 52 <div class="columns no-border"> 53 <div style="padding-top:10px"><p>1</p></div> 54 <p>2</p> 55 <div style="padding-bottom:20px"><p>3</p></div> 56 </div> 57 <div class="columns no-border"> 58 <div style="padding-top:3px"><p>1</p></div> 59 <p>2</p> 60 <div style="padding-bottom:0px"><p>3</p></div> 61 </div> 62 <div class="columns no-border"> 63 <div style="padding:10px 0 0 0"><p>1</p></div> 64 <p>2</p> 65 <p>3</p> 66 </div> 67 <div class="columns no-border"> 68 <div style="padding:20px 0 0 0"><p>1</p></div> 69 <div style="padding:0 0 20px 0"><p>2</p></div> 70 <p>3</p> 71 </div> 72 <div class="columns no-border"> 73 <p style="margin:0"></p> 74 <p style="margin:0"></p> 75 <p style="margin:0"></p> 76 </div> 77 78 79 </body></html>