[分享]css两个div上下距离

在使用CSS时，我们经常遇到两个DIV需要上下排列的情况，这时候我们需要设置它们之间的距离。下面我们来看一下如何实现这个功能。 首先，我们需要给这两个DIV分别设置一个class名，方便我们选择它们。...

在使用CSS时，我们经常遇到两个DIV需要上下排列的情况，这时候我们需要设置它们之间的距离。下面我们来看一下如何实现这个功能。
首先，我们需要给这两个DIV分别设置一个class名，方便我们选择它们。比如：

 .top-box {
    height: 50px;
    background-color: red;
  }
<br>
  .bottom-box {
    height: 100px;
    background-color: blue;
  } 

以上代码中，我们给第一个DIV设置了一个高度为50像素、背景颜色为红色的样式，给第二个DIV设置了一个高度为100像素、背景颜色为蓝色的样式。
然后，我们需要设置它们之间的距离。这可以通过设置第二个DIV的上边距来实现。为了让距离更美观，我们可以在第一个DIV的下面加一个2像素的底边框，这样更具分隔感，代码如下：

 .top-box {
    height: 50px;
    background-color: red;
    border-bottom: 2px solid black;
  }
<br>
  .bottom-box {
    height: 100px;
    background-color: blue;
    margin-top: 10px;
  } 

以上代码中，我们给第一个DIV的样式加了一个2像素宽的黑色边框，然后给第二个DIV设置了10像素的上边距，这样两个DIV之间就有了一定的距离。
当然，你也可以通过设置第一个DIV的下边距或者第二个DIV的外边距来实现相同的效果。
总之，通过设置Margin属性，我们可以轻松地实现两个DIV之间的距离效果。这对于网站设计来说是非常重要的，因为好的排版可以让页面看起来更加美观、整洁。