CSS中margin塌陷问题(一)

在CSS中,两个或多个垂直相邻的块级元素(可能是父子元素,也可能是兄弟元素),设置margin后,会出现边框塌陷(折叠)的问题

    <style type="text/css">
      div:nth-child(1) {
        width: 200px;
        height: 200px;
        background: pink;
        margin-bottom: 100px;
      }
      div:nth-child(2) {
        width: 200px;
        height: 200px;
        background: lightblue;
        margin-top: 100px;
      }
    </style>

如上,将第一个div的下外边距设为100px,第二个div的上外边距设为100px,如果不发生塌陷,则两个div应该有200px的间距,但实际上:

虽然设置的两个块级元素的外边距都能显示出来,但确发生了重叠效果
如果设置的外边距不一样,则整个显示的效果以外边距较大的为准
将第二个div的上外边距设为200px: