Как сделать отступ между элементами в 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;
}