margin-collapsing-bug616722-2-ref.html 2.0 KB

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