Введение в базовую модель CSS-боксов

Область контента, ограниченная границей контента, содержит "действительный" контент элемента, такой как текст, изображение или видеоплеер. Её размеры — ширина контента (или ширина content-box) и высота контента (или высота content-box). Часто она имеет цвет фона или изображение фона.

Если свойство box-sizing установлено в значение content-box (по умолчанию) и если элемент — это блочный элемент, размер области контента можно явно определить с помощью свойств width, min-width, max-width, height, min-height и max-height.

Область отступа, ограниченная границей отступа, расширяет область контента, включая отступ элемента. Её размеры — ширина padding-box и высота padding-box.

Толщина отступа определяется свойствами padding-top, padding-right, padding-bottom, padding-left и сокращённым свойством padding.

Область рамки, ограниченная границей рамки, расширяет область отступа, включая границы элемента. Её размеры — ширина border-box и высота border-box.

Толщина границ определяется свойствами border-width и сокращённым свойством border. Если свойство box-sizing установлено в border-box, размер области рамки можно явно определить с помощью свойств width, min-width, max-width, height, min-height и max-height. Если для блока задан фон (background-color или background-image), он распространяется до внешней границы рамки (т.е. под рамкой в порядке z-индекса). Это поведение по умолчанию может быть изменено свойством CSS background-clip.

Область отступов, ограниченная границей отступов, расширяет область рамки, включая пустую область, используемую для разделения элемента от соседних элементов. Её размеры — ширина margin-box и высота margin-box.

Размер области отступов определяется свойствами margin-top, margin-right, margin-bottom, margin-left и сокращённым свойством margin. При возникновении объединения отступов, область отступов не определена чётко, так как отступы совмещаются между блоками.

Наконец, обратите внимание, что для не замещаемых инлайновых элементов количество занимаемого пространства (вклад в высоту строки) определяется свойством line-height, даже если рамки и отступы всё ещё отображаются вокруг контента.

• Макет и содержащий блок
• Введение в каскад CSS
• Каскад, специфичность и наследование
• Основные понятия CSS:
  • Синтаксис CSS
  • Правила @
  • Комментарии
  • Специфичность
  • Наследование
  • Режимы макета
  • Визуальные модели форматирования
  • Объединение отступов
  • Значения
    • Начальные значения
    • Вычисленные значения
    • Используемые значения
    • Фактические значения
  • Синтаксис определения значений
  • Сокращённые свойства
  • Замещаемые элементы