MP Web Studio
CSSДоступно 100 из 100
45 / 100

УРОК 45 ИЗ 100

Сочетайте width и max-width

Создайте гибкий блок, который не становится слишком широким.

Официальный источникW3C CSS Box Sizing — preferred and maximum sizesПроверено: 2026-08-26
ШАГ 1 · ИЗУЧИТЕ

Как это работает

width: 100% позволяет блоку использовать доступное место, а max-width: 720px ограничивает его на больших экранах. Вместе они образуют адаптивный шаблон.

Правильный пример
.content { width: 100%; max-width: 720px; }

Блок сужается вместе с контейнером, но не превышает 720px.

Частая ошибка
.content { width: 720px; }

Фиксированная ширина 720px может выйти за пределы экрана телефона.

ШАГ 2 · ПРИМЕНИТЕ

Ваше задание

Задайте width: 100% и max-width: 720px.

ШАГ 3 · СОЗДАЙТЕ

Напишите и посмотрите результат

index.htmlCSS
Безопасный результатизолировано
Черновик хранится только в этом браузере.HTML и CSS разрешены · скрипты и сеть заблокированы
ШАГ 4 · ПРОВЕРЬТЕ

Что должно пройти

0%не проверено
  • Блок использует width: 100%.
  • Блок ограничен 720px.
  • Целевой блок присутствует.
Объясните логику решения

width задаёт предпочтительный размер, а max-width ограничивает его без фиксированной ширины.