CSS

Question

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

我想为每个部分创建一个边框，我希望这些部分用 space 分隔，并且它们的边框不会发生冲突。

我是运行这个代码：image with code

然而，这两个部分的边界正在发生碰撞。

我是菜鸟，昨天开始 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 仅适用于 table。你必须知道盒子模型以及边距和填充的排列方式:

CSS - 边框如何避免碰撞

CSS - borders how to avoid collision

html

border

collision