Загрузка...

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

Вы уже знаете border, padding, margin и width. Теперь соберите их на одной карте. Блочная модель CSS говорит: каждый элемент — набор вложенных слоёв: content в центре, затем padding, затем border, затем margin снаружи.

Четыре слоя

Читайте блок изнутри наружу.

📊 Слои блочной модели

Слой Где сидит Повседневная роль
Content Центр Здесь живут текст, картинки и дети; width / height обычно измеряют это
Padding Между content и border Внутренняя подушка; фон обычно её заливает
Border Вокруг padding Нарисованный край блока
Margin Снаружи border Внешний зазор, отделяющий этот блок от соседей

Сначала только размер content

Простая ширина без padding и border держит историю ясной.

Только ширина content

css
CSS Code 
.box-content {
width: 200px;
background-color: #ccfbf1;
}

Добавьте padding — окрашенная область растёт

Padding сидит внутри border. В модели по умолчанию content-box padding добавляется снаружи ширины content, поэтому окрашенный блок становится шире.

Content плюс padding

css
CSS Code 
.box-pad {
width: 200px;
padding: 20px;
background-color: #99f6e4;
}
/* Content остаётся 200px; padding добавляет по 20px с каждой стороны */

Добавьте border — ещё одно кольцо

Border оборачивает padding. При размере по умолчанию толщина border тоже добавляется к внешнему размеру border-box.

Content, padding и border

css
CSS Code 
.box-border {
width: 200px;
padding: 20px;
border: 4px solid #0f766e;
background-color: #5eead4;
}

Все четыре слоя вместе

Margin не красит фон; он только отодвигает соседей.

Полный рецепт блочной модели

css
CSS Code 
.card {
width: 200px;          /* content */
padding: 16px;         /* внутренняя подушка */
border: 2px solid #134e4a; /* край */
margin: 24px;          /* внешний зазор */
background-color: #ecfdf5;
}

Одна ширина, разный итоговый размер

Два блока могут делить width: 200px и всё же ощущаться очень по-разному, когда padding и border входят в рецепт.

Сравнить простой и с padding

css
CSS Code 
.bare {
width: 200px;
background-color: #fef3c7;
}

.padded {
width: 200px;
padding: 24px;
border: 6px solid #b45309;
background-color: #fde68a;
}
/* Оба заявляют width 200px; .padded занимает больше горизонтального места */

Правило по умолчанию на память

По умолчанию (box-sizing: content-box) width и height описывают content-box. Padding и border обычно делают итоговый видимый блок больше. Позже урок про box-sizing: border-box меняет эту арифметику.

Попробуйте сами

  1. Соберите .box-content только с width: 200px и фоном.
  2. Скопируйте, добавьте padding: 20px и заметьте рост окрашенной области.
  3. Добавьте толстый border и снова посмотрите общий размер.
  4. Добавьте margin: 24px и убедитесь, что соседи отодвигаются, а фон не заливает этот зазор.
  5. Поставьте .bare и .padded рядом — одна объявленная ширина, разный след.

Частые ошибки

  • Думать, что margin — часть заливки фона (он снаружи и обычно прозрачен)
  • Писать width: 200px и ждать, что border-box останется ровно 200px после жирного padding (не с content-box)
  • Путать порядок слоёв (content → padding → border → margin)
  • Путать outline с border (другой инструмент)
  • Перескакивать к привычкам border-box до понимания модели по умолчанию

Кратко

  • У каждого элемента есть слои content, padding, border и margin
  • Padding внутри border; margin снаружи
  • width/height по умолчанию измеряют content-box
  • Padding и border часто увеличивают видимый общий размер
  • Margin создаёт внешнее разделение без заливки фона
  • box-sizing (следующий спецурок) может изменить расчёт ширины

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
8
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 1 из 1
Css Урок