Внешние отступы

Если расположить два блока (div, article, section и так далее) друг под другом, то между ними не будет отступов. Это усложняет ориентирование на странице, так как между такими блоками может не быть визуальной разницы (особенно, если они имеют одинаковое значение background).

Для того, чтобы дать пространство блокам, используются внешние отступы. Внешний отступ указывается с помощью правила margin и принимает значения в таком же порядке, как и padding:

  • отступ сверху;
  • отступ справа;
  • отступ снизу;
  • отступ слева.
<style>
  .gray-block {
    background-color: #ededed;
    margin: 10px 0 10px 0;
  }

  .black-block {
    background-color: #000000;
    color: #ffffff;
  }
</style>

<div class="gray-block">
    Блок с текстом на сером фоне
</div>

<div class="black-block">
    Блок с текстом на чёрном фоне
</div>
Блок с текстом на сером фоне
Блок с текстом на чёрном фоне

Также, как у внутренних отступов, для удобства существуют сокращённые записи этих правил:

  • Если указать два значения, то первое будет использоваться для отступов по вертикали (сверху и снизу), а второе по горизонтали (справа и слева).
  • Если указать только одно значение, то оно будет использовано одновременно для всех сторон.

Задание

Добавьте в редактор div с классом margin и установите внешние отступы в 20 пикселей со всех сторон.


Нашли ошибку? Есть что добавить? Пулреквесты приветствуютсяhttps://github.com/hexlet-basics

Упражнение доступно только авторизованным пользователям.

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