Box model

CSS Box Model — это фундаментальная концепция компоновки, описывающая каждый HTML-элемент как прямоугольный блок, состоящий из четырёх вложенных слоёв: содержимое (content), padding, border и margin. По умолчанию браузеры используют модель content-box, при которой width и height применяются только к области содержимого, но задание box-sizing: border-box (повсеместно рекомендуется через сброс * { box-sizing: border-box; }) включает padding и border в объявленные размеры, что делает компоновку значительно предсказуемее. Понимание CSS Box Model необходимо для точной реализации макетов, поскольку свойства padding, border-width, margin и outline влияют на то, как элементы занимают пространство и взаимодействуют с соседями в потоке документа. Владение Box Model лежит в основе всей работы с CSS-компоновкой через Flexbox и CSS Grid — именно это первым делом проверяют Lighthouse и DevTools браузера при диагностике смещений макета, ухудшающих Core Web Vitals.

Как это работает

Box model стилизует DOM через селекторы (какие элементы), свойства (что менять), каскад (правила приоритета + наследования: inline > id > class > tag, !important перебивает всё). Layout-движки: normal flow, flexbox (1D), grid (2D), float (legacy). Box model: content + padding + border + margin. Современные фичи: custom properties (--var), @layer, container queries, :has(). Specificity + каскад — главный источник багов "почему не применяется?".

Когда применять

Flexbox — для 1D-раскладок (ряд или колонка элементов); Grid — для 2D-раскладок (ряды + колонки). Custom properties — для темизации + консистентности (--primary-color: #007aff). @layer — для организации specificity в больших проектах. Tailwind/UnoCSS или ванильный CSS — на вкус команды; оба работают; важна консистентность. Mobile-first media queries (min-width: не max-width:) композируются лучше.

Типичные ошибки

Ловушки Box model: !important повсюду ("фикс, который всегда работает" — пока два !important не столкнутся, и исходный баг возвращается умноженным); pixel-perfect раскладки ломаются на другом шрифте/размере (используйте em/rem для типографии); войны z-index, когда реальный фикс — рефакторинг stacking context; стили в JS inline (lock-in, нет темизации). Прочтите MDN про каскад один раз.

Связанные понятия

• CSS
• Селекторы и специфичность
• Flexbox
• CSS Grid