Урок с практикой по CSS (Онлайн курсы)
Выбрать другой урок из курса
Обсуждение
Теория урока

Свойство margin для установки отступов

Свойство margin используется очень часто, поэтому важно с ним познакомится. Оно нужно для установления отступа каждого края элемента, до внутренних границ родительского элемента. Часто в начале CSS файла можно увидеть следующую запись:

Код CSS
* {
margin: 0;
/* и другие */
}

Эта запись означает, что мы сбрасываем отступы всех элементов. Свойство margin имеет следующий синтаксис:

Код CSS
div {
margin: 1px 2px 3px 4px;
margin: 1px 2px 3px;
margin: 1px 2px;
margin: 1px;
margin: auto;
/* и другие */
}

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

  • 1 значение - отступ задается со всех сторон одинаково.
  • 2 значения - первое задает от верхнего и нижнего краёв, второе от левого и правого краёв.
  • 3 значения - первое от верхнего, второе от левого и правого, третье от нижнего краёв
  • 4 значения - задает от всех краёв в следующей последовательности: верх, право, низ, лево.

Так же существуют более конкретные аналоги: margin-top, margin-right, margin-bottom и margin-left. Например:

Код CSS
div {
margin-top: 20px; /* Отступ сверху 20 пикселей */
}
div {
margin-left: 50%; /* Отступ слева 50 процентов */
}
<
×
>
Не публикуйте свой код прямо в комментариях. Во-первых, он плохо отображается. Во-вторых, он может содержать для кого-то «спойлеры», т.е. ответы на практику. Воспользуйтесь специальными сервисами: cssdeck.com или jsfiddle.net.
Комментарии, содержащие код (пару строк не считается), будут безжалостно удаляться.