Как сделать отступ между элементами в css

Говоря об отступах, приходится иметь дело с двумя свойствами в CSS - margin и padding.

Свойство margin определяет внешний отступ на всех четырёх сторонах элемента. Это сокращение, которое устанавливает все отдельные поля одновременно: margin-top, margin-right, margin-bottom и margin-left.

Свойство padding устанавливает внутренние отступы/поля со всех сторон элемента. Область отступов это пространство между содержанием элемента и его границей. Отрицательные значения не допускаются. Свойство padding краткая форма записи свойств, чтобы не писать отдельное правило для каждой стороны (padding-top, padding-right, padding-bottom, padding-left).

Таким образом чтобы сформировать отступы между элементами правильно использовать - margin. Рассмотрим пример.

Исходный HTML-документ:

<div class="box">Блок №1</div>
<div class="box">Блок №2</div>
<div class="box">Блок №3</div>

Применив стили ниже, каждый из блоков получит отступ снизу в 25px

.box {
  background-color: #38d9a9;
  height: 100px;
  width: 125px;
  margin-bottom: 25px;
}