Создайте компонент с токенами

Объедините токены, логические свойства и предсказуемые размеры в карточке.

Официальный источникW3C CSS Logical Properties — component spacing and bordersПроверено: 2026-08-26

ШАГ 1 · ИЗУЧИТЕ

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

Токен описывает повторно используемое решение, логическое свойство адаптирует компонент к направлению письма, а border-box сохраняет управляемые размеры. Вместе они создают настраиваемый компонент.

Правильный пример

:root { --card-space: 24px; --card-accent: #2563eb; } .card { padding: var(--card-space); border-inline-start: 4px solid var(--card-accent); box-sizing: border-box; } .card-title { color: var(--card-accent); }

Отступ и акцент централизованы, а граница следует началу inline-оси.

Частая ошибка

.card { padding: 24px; border-left: 4px solid #2563eb; } .card-title { color: #2563eb; }

Повторяющиеся значения и физическая граница дают только разовый результат без нужной настройки и адаптации.

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

Ваше задание

Задайте токены 24px и #2563eb; используйте их для padding, inline-границы 4px, border-box и цвета заголовка.

index.htmlCSS

Безопасный результатизолировано

Черновик хранится только в этом браузере.HTML и CSS разрешены · скрипты и сеть заблокированы

ШАГ 4 · ПРОВЕРЬТЕ

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

0%не проверено

Токен отступа равен 24px.
Токен акцента равен #2563eb.
Padding читает токен отступа.
Логическая граница читает токен акцента.
Карточка использует border-box.
Заголовок читает тот же акцент.
Целевой элемент присутствует на странице.

Объясните логику решения

Два токена питают три визуальных объявления, а логическое свойство не фиксирует акцент слева.

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

Ваше задание

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

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