外边距距离塌陷

在css盒子模型中是会存在垂直方向上的外边距塌陷：

<style>
    .father{
      width: 200px;
      height: 200px;
      background-color: orange;
      margin-top: 100px;
    }

    .son{
      width: 100px;
      height: 100px;
      background-color: skyblue;
      margin-top: 100px;
    }

    .brother1{
      width: 200px;
      height: 200px;
      background-color: purple;
      margin-bottom: 100px;
    }

    .brother2{
      width: 200px;
      height: 200px;
      background-color: red;
      margin-top: 100px;
    }
  </style>
</head>
<body>
<!--  我们发现div在处于父子或者兄弟关系是，在垂直方向上会存在外边距塌陷 -->
<div class="father">
  <div class="son"></div>
</div>

<div class="brother1">
</div>
<div class="brother2"></div>

　　

posted @ 2020-10-14 21:53  coderLsq  阅读(16)  评论(0)    收藏  举报