margin collapse

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         .collapse1 {
  10.             margin: 50px;
  11.             width: 200px;
  12.             height: 200px;
  13.             /* max-height: 220px;*/
  14.             /* border: 1px solid black;   
  15.             padding: 10px;         */
  16.             /* 没有边框，没有padding会产生塌陷 */
  17.             background-color: pink;
  19.         }
  21.         .collapse2 {
  22.             width: 50px;
  23.             height: 50px;
  24.             margin: 50px;
  25.             background-color: red;
  26.         }
  27.     </style>
  28. </head>
  30. <body>
  31.     <div class="collapse1">
  32.         <!-- 父元素里写上内容，也不会产生margin塌陷 
  33.             但是会以内容的结尾为基准 -->
  34.         <div class="collapse2">
  35.         </div>
  36.     </div>
  37. </body>
  39. </html>

思考总结

  • margin collapse 只会发生在上下外边距。左右外边距不会发生margin collapse。
  • 正常流：内嵌元素，只有盒模型只有宽高属性，导致父子margin重叠，就会发生margin塌陷。