CSS - границы, как избежать столкновения

Question

Я создал внешний файл CSS, и у меня много проблем с границами.

Я хочу создать границу для каждого раздела и хочу, чтобы эти разделы были разделены пространство, а не их границы сталкиваются.

Я запускаю этот код: изображение с кодом

И, тем не менее, границы обеих секций сталкиваются.

Я нуб ie, начал html + css вчера.

Answer 1

интервал границы работает только для таблицы. Вы должны знать модель бокса и порядок расположения полей и отступов:

Answer 2

Это пример того, как вы можете настроить, как вы хотите.

.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>