.card { box-sizing: border-box; width: 100%; padding: 24px; border: 2px solid #334155; }Карточка остаётся в ширине контейнера даже с padding и границей.
УРОК 44 ИЗ 100
Сохраните ширину с border-box
Включите padding и границу в заданную ширину карточки.
ШАГ 1 · ИЗУЧИТЕ
Как это работает
При box-sizing: border-box свойство width описывает внешний край границы. Padding и граница вычитаются из области содержимого, а не увеличивают общую ширину.
.card { box-sizing: content-box; width: 100%; padding: 24px; border: 2px solid #334155; }При content-box padding и граница добавляются к width: 100% и могут вызвать overflow.
ШАГ 2 · ПРИМЕНИТЕ
Ваше задание
Задайте box-sizing: border-box и сохраните width: 100%.
index.htmlCSS
Безопасный результатизолировано
Черновик хранится только в этом браузере.HTML и CSS разрешены · скрипты и сеть заблокированы
ШАГ 4 · ПРОВЕРЬТЕ
Что должно пройти
0%не проверено
- ○Карточка использует border-box.
- ○Гибкая ширина остаётся 100%.
- ○Целевая карточка присутствует.
Объясните логику решения
border-box включает в width область содержимого, padding и границу, поэтому карточка остаётся внутри контейнера.