Посмотреть все уроки курса
Выбрать другой урок из курса
Поиск по сайту
Теория урока

148. Свойство 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 процентов */
}

Похожие уроки и записи блога

Свойство padding для установки полейОтступы, рамки, поля
Первое знакомство с PythonЗнакомство с Python
Знакомимся с Flexbox в CSSЗнакомство с Flexbox
Свойство background для работы с фономЦвета и фон
Свойство border для создания границОтступы, рамки, поля
Продолжаем написание классов в PythonЗнакомство с Python
Свойство z-index для определения уровня элементаПозиционирование
Внутреннее устройство и сортировка словаря в PythonЗнакомство с Python
Свойство outline для создания внешних границОтступы, рамки, поля
<
×
>
Впервые на сайте Codebra?

Извините за это всплывающее окно, меня они тоже раздражают.

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

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

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

Закрыть окно