让你的网页浮起来的CSS边距下移设置

一、什么是边距下移

在CSS中，每个元素都有自己的盒模型，包括内容区、边距区、边框区和填充区。边距指元素周围的空白区域，用来控制元素之间的距离。

当两个元素具有相邻的上下边距时，它们中间会出现一个空隙，这就是所谓的“边距塌陷”现象。而边距下移则是指一个元素的下边距会超出它所在盒子的下边界，导致后面的元素紧贴在它下面。

  .box {
    margin-bottom: 20px;
    background-color: pink;
    height: 100px;
  }
  .other-box {
    background-color: lightblue;
    height: 100px;
  }

在上面的例子中，两个盒子之间原本应该有20px的空隙，但是因为.box元素的下边距超过了它的盒子下边界，所以出现了边距下移的情况。

二、边距下移的应用场景

边距下移虽然是一个CSS的“副作用”，但是在实际开发中也有很多应用场景。

1、在页面布局中，可以使用边距下移来实现分隔线的效果。

  .divider {
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
  }

2、可以用边距下移来解决浮动元素在高度不确定的情况下造成的容器高度塌陷问题。

  .container:after {
    content: '';
    display: block;
    clear: both;
  }
  .float-box {
    float: left;
    margin-bottom: -99999px;
    padding-bottom: 99999px;
  }

在上面的例子中，float-box元素的上下边距为0，但是因为使用了负的下外边距和相等的下内边距，使得float-box元素高度扩展到了容器的高度，避免了容器高度塌陷的问题。

三、如何使用边距下移

在实际开发中，使用边距下移需要注意以下几点：

1、一般情况下，边距下移会导致元素在视觉上更加紧密，如果要增加元素之间的距离，应该考虑使用padding或者border来代替margin。

2、边距下移的效果可能与布局相关，应该针对具体的场景进行调整。

3、在使用边距下移解决浮动元素容器高度塌陷问题时，需要注意容器的clear方法。

  .clearfix::after {
    content: '';
    display: block;
    clear: both;
  }

在上面的例子中，clearfix类名的元素使用了::after伪元素来清除左右浮动，避免了浮动元素对父容器高度的影响。

四、总结

边距下移虽然是CSS中的一个“副作用”，但是在实际开发中也有很多应用场景，可以在一定程度上优化页面布局。在使用边距下移时，需要注意具体的场景和问题，并结合其他CSS属性进行调整。