[分享]css两个盒子中间的空隙

在前端编程中，我们经常会用到CSS盒模型。但是在开发中，我们经常发现两个盒子之间会存在一些奇奇怪怪的空隙，这给我们的页面布局造成了诸多困扰。那么这个空隙是怎么来的呢？原因并不是什么神秘的魔法，而是由于...

在前端编程中，我们经常会用到CSS盒模型。但是在开发中，我们经常发现两个盒子之间会存在一些奇奇怪怪的空隙，这给我们的页面布局造成了诸多困扰。

那么这个空隙是怎么来的呢？原因并不是什么神秘的魔法，而是由于盒子的外边距（margin）的存在。理论上来讲，当两个盒子在同一行时，它们之间的空间应该是等于它们的margin之和的。这也就是为什么我们总能看到那些

margin:0 auto;

那么如何解决这个问题呢？最直接的方法就是把两个盒子的margin合并为一个，让它们之间的空隙消失。我们可以为这两个盒子添加同一个父元素，然后统一设置这个父元素的 padding 或 border ，使得兄弟元素之间的空隙消失。

.parent {
  border: 1px solid #ccc;
  overflow: hidden;
}

.child {
  float: left;
  margin: 10px;
} 

这又引出了一个新的问题，如果这两个盒子之间需要有一些间距，怎么办呢？我们可以使用 CSS3 中的 flex 布局来实现这个目标。将这两个盒子作为 flex 容器的子元素，然后设置它们之间的间距即可。

.parent {
  display: flex;
  justify-content: space-between;
}

.child {
  margin: 10px;
} 

除此之外，我们还可以使用其他的一些方法来解决这个问题，比如让每个盒子都有相同的宽度，或者使用绝对定位等手段。但不管怎样，了解这个问题的根本原因以及使用多种方法来解决这个问题，都是十分必要的。