Как сделать отступ в html от края

Говоря об отступах, приходится иметь дело с двумя свойствами в 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>

Применив стили ниже, блок получит отступ от верхнего края в 20px и от левого 40px.

.box {
  background-color: #38d9a9;
  height: 100px;
  width: 125px;
  margin-top: 20px;
  margin-left: 40px;
}