Margin CSS что это и как использовать на практике

Разрабатывая тот или иной сайт всегда есть необходимость отступов между элементами или внутри элемента. За внутренний отступ отвечает padding, о нем мы уже рассказывали в предыдущей статье, padding css что это и как работает.
Теперь мы поговорим о внешнем отступе, то есть, о расстоянии между блоками, за это отвечает такой стиль как margin. Сейчас мы на примерах разберем, margin css что это и как оно работает.

Margin CSS что это и как применять

margin — это внешний отступ самого элемента от других элементов. Например, можно задать отступ одного блока от другого, чтоб они не были прилипшие друг к другу. А можно и задать отступ текста одного от другого, отступ текста от картинки и т.д. и т.п. Приведем простой пример отступа:

<div class="box-margin">Пример margin block 1</div>
<div class="box-margin">Пример margin block 2</div>

.box-margin {
  background-color: #4CAF50;
  color: white;
  margin: 20px;
}

Данным образом мы создали два блока с классом box-margin. Затем каждому из них применили один и тот же стиль margin с отступом в 20px. То есть, один блок от другого отступает на 20 пикселей, так как блока у нас два, расстояние между ними будет 40 пикселей.

Способы применения margin css

Задать внешний отступ с помощью css стиля margin можно несколькими способами:

margin: 20px;                /* отступ со всех сторон */
margin: 10px 20px;           /* сверху/снизу и слева/справа */
margin: 10px 15px 20px;      /* сверху, по бокам, снизу */
margin: 5px 10px 15px 20px;  /* сверху, справа, снизу, слева */

Чтоб понять отступ той или иной стороны, всегда представляйте движение по часовой стрелке. Задаются значения сверху, потом справа, внизу и слева.

Отдельные свойства margin css

Отдельные свойства css стиля margin рекомендуется применять если нужно задать расстояние какой либо одной стороне.

margin-top: 10px;     /* сверху */
margin-right: 15px;   /* справа */
margin-bottom: 20px;  /* снизу */
margin-left: 5px;     /* слева */

Отрицательные значения margin css

Возможно как к padding так и к margin применять отрицательные значения. То есть, задавать цифровые значения со знаком минус. Таким образом отступ будет в обратном направлении, не отступая от соседнего блока а наоборот налезая на него.

.title {
  margin-top: -10px;
}

Автоматическое выравнивание margin css

Можно блок выравнивать автоматически, то есть, по центру. Но для этого нужно обязательно задать ширину выравниваемого блока.

.container {
  width: 400px;
  margin: 0 auto;
}

Сравнение margin и padding

Приводим в пример таблицу сравнения отступов padding и margin. Все зависит от конкретной задачи верстальщика.

Итог применения margin css

Только что мы разобрали что такое стиль margin и как его применять на примерах. Если вам нужна более детальная инструкция и примеры кода, напишите об этом в комментарии и мы сделаем более детальный разбор.