CSS-边界如何避免碰撞

Question

我创建了一个CSS外部文件，但遇到很多边框问题。

我想为每个部分创建一个边框，并且我希望这些部分之间用空格隔开，并且不要让它们的边框发生碰撞。

我正在运行此代码：image with code

尽管如此，两个部分的边界都在碰撞。

我是noobie，昨天开始使用html + css。

Answer 1

这是一个示例，您可以调整其显示方式。

.main {
  display: flex;
}

.square {
  width: 300px;
  height: 300px;
  border: 2px solid black;
  margin: 30px;
}

<section class="main">
  <div class="square"></div>
  <div class="square"></div>
</section>
<section class="main">
  <div class="square"></div>
  <div class="square"></div>
</section>
<section class="main">
  <div class="square"></div>
  <div class="square"></div>
</section>

Answer 2

border-spacing仅适用于表格。您必须了解盒子模型以及边距和填充的排列方式：