css上下两盒子不要空隙

在网页设计中，我们常常会遇到上下两个盒子之间存在间隙的情况。如果是一个页面只有一处这样的间隙，我们可以通过手动调整margin或padding来解决这个问题。但如果存在多个这样的情况，我们就需要使用CSS来提供一种通用的解决方案。

.box {
  overflow: hidden;
}

.box > div {
  float: left;
  width: 50%;
  box-sizing: border-box;
  padding: 0 10px;
} 

如上所示，我们定义一个包含两个子盒子的父盒子，通过给父盒子设置overflow:hidden，可以让子盒子的高度自适应父盒子，从而就消除了他们之间的间隙。同时，我们给子盒子设置了float:left，让他们并排排列。为了保证子盒子宽度的稳定，我们给他们定义了宽度为50%，并且使用了box-sizing:border-box属性，将内边距包含在宽度内，从而不会影响子盒子的宽度。

在这个方案中，我们通过CSS样式，让两个子盒子在不产生间隙的情况下并排排列，从而能够实现我们的设计效果。