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

Изменяем блочную модель, свойство box-sizing

Проблему с шириной тянущихся полей решить сложно. Идеальным вариантом было бы изменение алгоритма расчёта ширины элемента, чтобы свойство width задавало не ширину содержания, а общую ширину.

К счастью, такая возможность в CSS есть. Реализуется она с помощью свойства box-sizing.

Это свойство имеет два значения:

  1. content-box — значение по умолчанию, соответствует стандартной блочной модели.
  2. border-box — изменяет режим расчёта ширины элемента на описанный выше: теперь ширина элемента включает и рамку, и внутренние отступы и, собственно, ширину содержания самого элемента.

Полезная статья про box-sizing на русском — «Используйте свойство box-sizing».

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

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

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

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

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

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

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