• Теория
  • Теория

Стандартная блочная модель

Стандартная блочная модель отвечает на основной вопрос:

Сколько же в итоге места будет занимать бокс?

Ответ следующий:

Область, занимаемая блочным боксом, складывается из его ширины и высоты содержания, внутренних и внешних отступов, ширины рамок.

Для строчных боксов есть свои особенности, которые мы опишем позже.

Схема блочной модели:

Стандартная блочная модель

  • ширина/высота содержания — свойства width и height (синий прямоугольник на схеме);
  • внутренние отступы — свойство padding;
  • рамки — свойство border;
  • внешние отступы — свойство margin.

Хотите досконально разбираться в разметке, знать о доступности, строить сетки на флексбоксах? Записывайтесь на профессиональный курс по вёрстке первого уровня, проходящий c 27 мая по 29 июля 2024. До 27 мая цена 22 900 ₽

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Блочная модель документа» тренажёра «Боксовая модель и позиционирование» можно после регистрации и оформления подписки.