[分享]css两个容器之间的距离

在CSS中，设置两个容器之间的距离是很重要的一个问题。一般来说，我们使用margin属性来设置两个容器之间的距离。比如，我们可以给第一个容器设置marginbottom属性，给第二个容器设置margi...

在CSS中，设置两个容器之间的距离是很重要的一个问题。

一般来说，我们使用margin属性来设置两个容器之间的距离。比如，我们可以给第一个容器设置margin-bottom属性，给第二个容器设置margin-top属性来达到这个目的。

.container1 {
   margin-bottom: 20px;
}

.container2 {
   margin-top: 20px;
} 

不过，使用margin属性来设置容器之间的距离，有时候会引起问题。例如，当两个容器都使用了margin属性时，它们的相对距离可能不符合预期。

这时候，我们可以使用另一个CSS属性——padding。给第一个容器添加padding-bottom属性，给第二个容器添加padding-top属性，也可以实现容器之间的距离效果。

.container1 {
   padding-bottom: 20px;
}

.container2 {
  padding-top: 20px;
} 

与margin不同的是，padding属性是在元素内部的，不会影响到元素之间的相对距离。所以，使用padding来设置容器之间的距离会更加可靠。

总之，在CSS中设置两个容器之间的距离，我们可以使用margin或padding属性，但是要根据具体情况选择合适的方式。