margin-collapsing-bug616722-1-ref.html 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. <!DOCTYPE html>
  2. <html><head>
  3. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  4. <title>616722-1</title>
  5. <style type="text/css">
  6. body,html { margin:0;padding: 10px;}
  7. p { margin: 0; background:pink; }
  8. .columns {
  9. -webkit-column-count: 1;
  10. -moz-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. <div class="columns no-border">
  38. <div style="padding:10px 0 3px 0"><p>The quick brown fox jumps over the lazy dog.</p></div>
  39. </div>
  40. <div class="columns no-border">
  41. <div style="padding:3px 0 10px 0"><p>The quick brown fox jumps over the lazy dog.</p></div>
  42. </div>
  43. <div class="columns no-border">
  44. <div style="padding:10px 0"><p>The quick brown fox jumps over the lazy dog.</p></div>
  45. </div>
  46. <div class="columns no-border">
  47. <div style="padding:20px 0 10px 0"><p>The quick brown fox jumps over the lazy dog.</p></div>
  48. </div>
  49. <div class="columns no-border">
  50. <div style="padding:20px 0 0 0"></div>
  51. </div>
  52. <!--
  53. <div class="columns no-border" style="margin-bottom:3px">
  54. <div><p>The quick brown fox jumps over the lazy dog.</p></div>
  55. </div>
  56. <div class="columns no-border" style="margin-top:3px">
  57. <div><p>The quick brown fox jumps over the lazy dog.</p></div>
  58. </div>
  59. <div class="columns no-border">
  60. <div><p>The quick brown fox jumps over the lazy dog.</p></div>
  61. </div>
  62. <div class="columns no-border" style="margin-top:20px">
  63. <div><p>The quick brown fox jumps over the lazy dog.</p></div>
  64. </div>
  65. <div class="columns no-border">
  66. <div></div>
  67. </div>
  68. -->
  69. </body></html>