Урок с практикой по 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 процентов */
}
<
×
>
Внимание! Впервые на этом сайте?

Образовательный ресурс codebra.ru полностью посвящен программированию. Все курсы и уроки находятся на главной странице. Вы можете начать изучение прямо сейчас, кликнув на ссылки: HTML, CSS, JavaScript, C++, PHP, jQuery, Python, Bootstrap 3

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

Удачи в обучении!

Закрыть окно