Каталог
Веб-разработка с нуля: четыре курса по порядку.
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Каталог
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Урок 46 из 53 · 9 мин
margin-inline, margin-block, padding-inline, padding-block, inline-size, block-size, inset-inline и writing-mode.
Открываемся в Дубае! Сайт будет и на арабском.
Там текст справа налево. margin-left окажется не с той стороны. Логические свойства знают направление сами.
margin-inlinemargin-inline: auto центрирует.<style>
.a { margin-inline: 24px; background: #fdf6ec; padding: 4px; }
</style>
<div class="a">margin-inline: 24px</div>margin-blockpadding-inline · padding-block<style>
button { padding-inline: 20px; padding-block: 6px; }
</style>
<button>Заказать</button>inline-size · block-sizeinline-size — ширина по строке, block-size — высота.inset-inline-startleft — «начало строки».writing-modevertical-rl — вертикальный текст.<style>
.v { writing-mode: vertical-rl; background: #c8763a; color: white; padding: 6px; height: 90px; }
</style>
<div class="v">СЕВЕР</div>Пишешь left/right — подумай, не нужен ли inline-start/inline-end.
У .btn замени отступы на логические: padding-inline: 20px и padding-block: 8px.
Выберите один ответ.
Чему соответствует margin-inline при письме слева направо?
Выберите один ответ.
Зачем логические свойства?
Проверяем состояние обучения…