[分享]css两个盒子之间的距离

在CSS中，当两个盒子之间需要有距离时，可以使用margin属性或padding属性。

.box1 {
  background-color: red;
  width: 200px;
  height: 100px;
  margin-right: 20px; /* box1的右侧与下一个盒子之间有20px的距离 */
}

.box2 {
  background-color: blue;
  width: 200px;
  height: 100px;
} 

上述代码中，box1的margin-right属性设置为20px，表示box1的右侧与下一个盒子之间有20px的距离。

而若是使用padding属性，则是在盒子内部与另一个盒子之间留出一定的距离：

.box1 {
  background-color: red;
  width: 200px;
  height: 100px;
  padding-right: 20px; /* box1的右侧与下一个盒子之间有20px的距离 */
}

.box2 {
  background-color: blue;
  width: 200px;
  height: 100px;
} 

上述代码中，box1的padding-right属性设置为20px，表示box1的右侧与下一个盒子之间有20px的距离，但同时box1的背景色会占据这20px的空间。

因此，在使用margin和padding属性时需要根据具体需求选择合适的属性来设置盒子之间的距离。