логотип PurpleSchool
логотип PurpleSchool

Структура блочной модели. Свойства Padding и Margin.

Автор

Алексей Овсянников

Блочная модель CSS одна из фундаментальных концепций веб-дизайна. Понимание того, как она работает, необходимо для создания любых веб-сайтов.

Структура блочной модели

Блочная модель состоит из четырех частей:

  • Содержимое ( content ) — область, в которой отображается фактическое содержимое элемента (например, текст, изображения).
  • Внутренний отступ ( padding ) — пространство между содержимым и границей.
  • Рамка( border ) — линия, которая окружает содержимое и отступы.
  • Внешний отступ ( margin ) — пространство между границей и соседними элементами.

Блочна модель

По умолчанию для блочной модели свойство box-sizing установлено в значение «content-box», что означает, что размер элемента определяется размером его содержимого. Изменив значение на «border-box», мы изменяем алгоритм расчета таким образом, чтобы он включал отступы и границы в общий размер блочного элемента.

Cвойство Padding

Свойство padding в CSS отвечает за установку пространства между содержимым элемента и его границей.

Синтаксис

Свойство padding можно применить как сразу ко всем четырем направлением (сверху, справа, снизу, слева), так задать свое значения для каждого направления по отдельности.

  • Если существует только одно значение, оно применяется ко всем сторонам. Например, такая запись создаст отступ в 10px внутри блока по всем сторонам.
.element {
  padding: 10px;
}
  • Если два указать два значения,
.element {
  padding: 10px 8px;
}

то отступ в 10px будет создан для сверху и снизу, а отступ в 8px применяться для правой и левой границы.

  • Если имеется три значения,
.element {
  padding: 10px 8px 12px;
}

, то 10px применяться к верхней границе, 8px - к левой и правой границе, а 12px к нижней границе.

  • Если есть четыре значения
.element {
  padding: 10px 8px 12px 6px;
}

, то значения будут применены в порядке: верх, справа, снизу, слева.

  • Так же можно установить значение каждого направления отдельно:
.element {
  padding-top: 10px;
  padding-right: 8px;
  padding-bottom: 12px;
  padding-left: 6px;
}

Cвойство Margin

Свойство margin в CSS отвечает за установку пространства между элементом и соседними элементами.

Синтаксис

Подобно свойству padding внешний отступ можно установить как для всех направлений сразу указав только одно значения:

.element {
  margin: 10px;
}
  • через указывание двух, трех или четырех значений можно определить разные значения для каждой из сторон элемента.
.element-1 {
  margin: 10px 8px;
} /* верхний и нижний внешние отступы будут равны 10px, а правый и левый — 8px */

.element-2 {
  margin: 10px 8px 12px;
} /* верхний внешний отступ будет равен 10px, левый и правый — 8px, а нижний — 12px */

.element-3 {
  margin: 10px 8px 12px 6px;
} /* значения применять в порядке - сверху, справа, снизу, слева */

.element-4 {
  margin-top: 10px;
  margin-right: 8px;
  margin-bottom: 12px;
  margin-left: 6px;
} /* отдельная запись для каждого направления*/

Схлопывания полей (Margin Collapsing)

Смежные элементы с вертикальными отступами объединяют расстояния своих полей в большее из двух значений. Рассмотрим это на следующим примере:

<div class="elem elem-1">Element 1</div>
<div class="elem elem-2">Element 2</div>
.elem {
  height: 50px;
  width: 50px;
}

.elem-1 {
  margin-bottom: 45px;
}

.elem-2 {
  margin-top: 55px;
}

Без схлопывания полей расстояние между двумя элементами div было бы 100px. Однако из-за схлопывания полей расстояние между двумя элементами будет равно 55px.

  • Упомянем так же случаи когда схлопывания полей не происходит:
    • когда один из элементов имеет абсолютно позиционированных;
    • когда для одного из элементов явно установлено свойство float;
    • когда один из элементов имеет margin;
    • когда для одного из элементов свойство display имеет значение inline-block;

Стоит отметить, что, хотя схлопывание полей является поведением по умолчанию, его можно избежать. Например, изменив свойства display в значение inline-block.

Стрелочка влевоСвойство Position. Особенности его применения.

Все гайды по Css

Полное руководство по использованию свойства will-change в CSSПолное руководство по свойству transform-style в CSSУправление точкой опоры трансформаций в CSS с помощью transform-originИспользование функций CSS-трансформации; Полное руководствоПолное руководство по свойству transform-box в CSSУправление элементами с помощью свойства transform в CSSПолное руководство по свойству perspective-origin в CSSПолное руководство по свойству perspective в CSSПолное руководство по свойству backface-visibility в CSS
Универсальный селектор в CSS. Полное руководство с примерамиСелектор по тегу в CSS. Полное руководство с примерамиПеречисление селекторов в CSS. Полное руководство с примерамиСелектор потомка в CSS. Полное руководство с примерамиСелектор по идентификатору в CSS; Полное руководство с примерамиКомбинированные селекторы в CSS; Полное руководство с примерамиСелектор по классу в CSS; Полное руководство с примерамиСелектор по атрибуту в CSS; Полное руководство с примерами
Псевдокласс selection. Полное руководство с примерамиПсевдоэлементы в CSS. Полное руководство с примерамиПсевдоэлемент placeholder в CSS. Полное руководство с примерамиПсевдоэлемент marker в CSS. Полное руководство с примерамиПсевдоэлемент first-line в CSS. Полное руководство с примерамиПсевдоэлемент first-letter в CSS. Полное руководство с примерамиСвойство content в CSS. Полное руководство с примерамиПсевдоэлемент before в CSS. Полное руководство с примерамиПсевдоэлемент backdrop в CSS. Полное руководство с примерамиПсевдоэлемент after в CSS. Полное руководство с примерами
Псевдокласс where в CSS. Полное руководство с примерамиПсевдокласс visited в CSS. Полное руководство с примерамиПсевдоклассы группы type в CSS. Полное руководство с примерамиПсевдокласс target в CSS. Полное руководство с примерамиПсевдокласс root в CSS. Полное руководство с примерамиПсевдокласс required в CSS. Полное руководство с примерамиПсевдоклассы в CSS. Полное руководство с примерамиПсевдокласс placeholder-shown в CSS. Полное руководство с примерамиПсевдокласс optional в CSS. Полное руководство с примерамиПсевдокласс not в CSS. Полное руководство с примерамиПсевдокласс link в CSS. Полное руководство с примерамиПсевдокласс lang в CSS. Полное руководство с примерамиПсевдокласс is в CSS. Полное руководство с примерамиПсевдоклассы invalid и valid в CSS. Полное руководство с примерамиПсевдокласс indeterminate в CSS. Полное руководство с примерамиПсевдоклассы in-range и out-of-range. Полное руководство с примерамиПсевдокласс hover в CSS. Полное руководство с примерамиПсевдокласс has в CSS. Полное руководство с примерамиПсевдокласс focus-within в CSS. Полное руководство с примерамиПсевдокласс focus-visible в CSS. Полное руководство с примерамиПсевдокласс focus в CSS. Полное руководство с примерамиПсевдокласс empty в CSS. Полное руководство с примерамиПсевдоклассы disabled и enabled в CSS. Полное руководство с примерамиПсевдокласс default в CSS. Полное руководство с примерамиПсевдоклассы группы child в CSS. Полное руководство с примерамиПсевдокласс checked в CSS. Полное руководство с примерамиПсевдокласс active в CSS. Полное руководство с примерами
Функция var в CSS. Полное руководство с примерамиФункция url в CSS. Полное руководство с примерамиФункция repeating-radial-gradient в CSS. Полное руководство с примерамиФункция repeating-linear-gradient в CSS. Полное руководство с примерамиФункция repeating-conic-gradient в CSS. Полное руководство с примерамиФункция radial-gradient в CSS. Полное руководство с примерамиФункция min в CSS. Полное руководство с примерамиФункция max в CSS. Полное руководство с примерамиФункция linear-gradient в CSS. Полное руководство с примерамиФункция image-set в CSS. Полное руководство с примерамиФункции фильтров в CSS. Полное руководство с примерамиФункция conic-gradient в CSS. Полное руководство с примерамиФункция clamp в CSS. Полное руководство с примерамиФункция calc в CSS. Полное руководство с примерамиФункция attr в CSS. Полное руководство с примерами
Вендорные префиксы в CSS. Полное руководство с примерамиКонтекст наложения в CSS. Полное руководство с примерамиСпецифичность в CSS. Полное руководство с примерамиПодход «Pixel Perfect» в верстке сайтов. Полное руководство с примерамиНаследование в CSS. Полное руководство с примерамиCSS-правило. Полное руководство с примерамиКомментарии в CSS. Полное руководство с примерамиПринцип каскада в CSS. Полное руководство с примерамиБлочная модель в CSS. Полное руководство с примерамиСвойство all в CSS. Полное руководство с примерамиПодключение стилей к HTML. Полное руководство с примерами
Полное руководство по свойству will-change в CSSПолное руководство по transition-timing-function в CSSОсновы использования transition-property в CSS; управление плавными переходамиCSS transition-duration; Полное руководство по управлению продолжительностью переходовCSS transition-delay; Полное руководство по управлению задержкой переходовCSS transition; Полное руководство по созданию плавных переходовCSS @keyframes; Полное руководство по созданию анимацийCSS animation-timing-function; Полное руководство по управлению проигрыванием анимацийCSS animation-play-state; Полное руководство по управлению анимациямиCSS animation-name; Полное руководство по заданию имени анимацииCSS animation-iteration-count; Полное руководство по управлению количеством повторений анимацииCSS animation-fill-mode; Полное руководство по управлению состоянием элементов после анимацииCSS animation-duration; Полное руководство по управлению длительностью анимацииCSS animation-direction; Полное руководство по управлению направлением анимацииCSS animation-delay; Полное руководство с примерамиCSS-анимации; Полное руководство с примерами
Открыть базу знаний