[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"question-osnovy-css-chto-takoe-blochnaya-model-box-model":3},{"id":4,"slug":5,"topicId":6,"topicSlug":7,"topicName":8,"topicEmoji":9,"question":10,"answer":11,"codeLang":12,"codeSrc":12,"important":12,"commonMistakes":12,"modernUsage":12,"difficulty":13,"tags":14,"related":18,"progress":19,"seo":20},1031,"chto-takoe-blochnaya-model-box-model",32,"osnovy-css","Основы CSS","🎨","Что такое блочная модель (Box Model)?","Блочная модель (Box Model) — это фундаментальная концепция CSS, описывающая, как каждый HTML-элемент представляется в виде прямоугольного блока, состоящего из четырёх областей: content, padding, border и margin.\n\n> Аналогия из жизни: элемент — это посылка. Содержимое (content) — сам товар, упаковочный материал вокруг него (padding) — пенопласт, коробка (border) — картонная стенка, а расстояние между коробками на полке (margin) — зазор.\n\n### Структура\n\n```\n┌─────────────────────────────────────┐\n│             margin                  │\n│  ┌───────────────────────────────┐  │\n│  │          border               │  │\n│  │  ┌─────────────────────────┐  │  │\n│  │  │       padding           │  │  │\n│  │  │  ┌───────────────────┐  │  │  │\n│  │  │  │     content       │  │  │  │\n│  │  │  │  width x height   │  │  │  │\n│  │  │  └───────────────────┘  │  │  │\n│  │  └─────────────────────────┘  │  │\n│  └───────────────────────────────┘  │\n└─────────────────────────────────────┘\n```\n\n### box-sizing\n\n| Значение | Что включает width\u002Fheight | По умолчанию |\n|----------|--------------------------|-------------|\n| `content-box` | Только content | Да |\n| `border-box` | content + padding + border | Нет (нужно указать явно) |\n\nС `content-box` (по умолчанию): если `width: 200px`, `padding: 20px`, `border: 1px`, реальная ширина элемента = 200 + 20*2 + 1*2 = 242px.\n\nС `border-box`: `width: 200px` — это итоговая ширина, включая padding и border. Содержимое займёт 200 - 20*2 - 1*2 = 158px.\n\n### Общепринятый сброс\n\n```css\n*, *::before, *::after {\n  box-sizing: border-box;\n}\n```\n\nПочти все современные проекты используют `border-box` глобально — так проще рассчитывать размеры.\n\n> **На собеседовании:** обязательно объяснить разницу между `content-box` и `border-box`. Частая ошибка — не упомянуть `box-sizing` или не знать, какое значение стоит по умолчанию.","","middle",[15,16,17],"css","box-model","раскладка",[],null,{"title":21,"description":22,"ogTitle":23,"ogDescription":24,"keywords":25,"schemaAnswer":36,"featuredSnippetReady":37},"Что такое блочная модель (Box Model) в CSS — Gymterview","Box Model CSS: content, padding, border, margin. Разница content-box и border-box, глобальный сброс box-sizing, расчёт реальной ширины элемента.","Box Model: блочная модель CSS — Gymterview","Блочная модель CSS: content, padding, border, margin. content-box vs border-box, глобальный сброс box-sizing.",[26,27,28,29,30,31,32,33,34,35],"Box Model","блочная модель","content-box","border-box","box-sizing","padding","margin","border","CSS","собеседование","Box Model — концепция CSS, где каждый HTML-элемент представлен прямоугольным блоком из четырёх областей: content (содержимое), padding (внутренний отступ), border (граница), margin (внешний отступ). По умолчанию content-box: width задаёт только content. С border-box: width включает content + padding + border. Почти все проекты используют глобальный сброс: *, *::before, *::after { box-sizing: border-box; }.",true]