Логические отступы и граница
Заменяйте top/right/bottom/left логическими эквивалентами свойств start/end/block/inline.
«Логические отступы и граница» — бесплатный урок CSS Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.
Логические эквиваленты отступов
У физических свойств отступов есть логические аналоги, использующие блочное и строчное направления:
margin-top→margin-block-startmargin-bottom→margin-block-endmargin-left→margin-inline-startmargin-right→margin-inline-end
Логические сокращённые свойства
Новые сокращённые свойства охватывают обе стороны блочной или обе стороны строчной оси:
<div class="card">Card with logical spacing</div>
Центрирование с помощью margin-inline: auto
Классический шаблон центрирования теперь имеет логический эквивалент:
<div class="container">Centered container</div>
Логические свойства границ
Задавайте границы относительно логических сторон:
<div class="card">Card with top border</div>
<blockquote class="quote">Quoted text with a gold side border</blockquote>
Логические свойства позиционирования
У свойств позиционирования также есть логические аналоги:
top→inset-block-startbottom→inset-block-endleft→inset-inline-startright→inset-inline-end
Сокращённая запись inset
Свойство inset уже является логической сокращённой записью для всех четырёх сторон. Свойства inset-block и inset-inline позволяют управлять двумя осями.
<div class="wrap"><div class="overlay"></div></div>
Логические свойства размеров
У ширины и высоты есть логические эквиваленты:
<div class="box">Sized box</div>
Сравнение: физические и логические свойства
Боковая панель с границей со стороны начала:
<div class="sidebar-physical">Physical (border-left)</div>
<div class="sidebar-logical">Logical (border-inline-start)</div>
Логические значения float и clear
Свойства float и clear теперь поддерживают логические значения:
<div class="figure"></div><p>Text wraps around the floated figure.</p><div class="clear">Cleared element</div>
Логическое text-align
text-align: start и text-align: end — логические альтернативы значениям left и right, автоматически адаптирующиеся к направлению текста.
<div class="nav-link">Aligned to the start (left in LTR)</div>
Стратегия перехода
В новом коде отдавайте предпочтение логическим свойствам. В существующем коде перерабатывайте по одному компоненту за раз. Приоритет перехода: отступы (margin/padding), границы, размеры, позиционирование.
Быстрая проверка
Какое логическое свойство эквивалентно margin-left в макете LTR и должно стать margin-right в RTL?
Итоги
Логические свойства margin, padding и border используют направления block и inline вместо физических top/right/bottom/left. Сокращённые записи, такие как margin-block, padding-inline и inset-block, сразу охватывают обе стороны. В новом коде отдавайте предпочтение логическим свойствам для всех отступов, чтобы автоматически поддерживать RTL и режимы письма с вертикальным направлением.
Часто задаваемые вопросы
Урок «Логические отступы и граница» бесплатный?
Да — полный текст урока «Логические отступы и граница» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.
Чему я научусь в уроке «Логические отступы и граница»?
Заменяйте top/right/bottom/left логическими эквивалентами свойств start/end/block/inline. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать CSS Academy?
Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Логические отступы и граница»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке CSS Academy?
Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Зачем нужны логические свойства: интернационализация
- Направления блочного и строчного потока
- Логические отступы и граница
- Логические свойства в RTL-макетах