css上下盒子间距怎么弄

在使用CSS布局时，设置盒子间距是很常见的操作。但是在设置上下盒子间距时，却常常有人会遇到困扰。下面介绍几种方法：

方法一：使用margin

.box {
  margin-bottom: 20px;
} 

这种方法比较简单，只需要给上方的盒子设置下边距即可。但是会出现一个问题，就是当下方的盒子高度不确定时，标签垂直方向会有一定的偏移。

方法二：使用padding

.box {
  padding-bottom: 20px;
} 

这种方法是给下方的盒子增加上边距，避免了上述问题，同时还可以设置background-color等属性。

方法三：使用伪元素

.box + .box::before {
  content: "";
  display: block;
  height: 20px;
} 

这种方法比较灵活，通过给每个盒子的前一个盒子增加一个伪元素，使两个盒子之间保持一样的间距。这样即使下方的盒子高度不确定，也不会出现偏移问题。注意，这种方法必须保证两个相邻的盒子的父元素不能有其他元素。