margin-inline
Логические свойства: размеры и отступы по направлению текста вместо «слева», «справа», «сверху», «снизу».
Синтаксис
margin-inline: start end;Значения
| Параметр | Тип | Описание |
|---|---|---|
| margin-inline | length | Отступы в начале и конце строки — слева и справа в русском тексте. |
| margin-block | length | Отступы до и после блока — сверху и снизу. |
| padding-inline | padding-block | length | То же для внутренних отступов. |
| inline-size | block-size | length | Логические ширина и высота. |
| inset | length | Сокращение для `top`, `right`, `bottom` и `left` сразу: `inset: 0`. |
Примеры
Центрирование и отступы логическими свойствами:
<style>
.box { margin-inline: auto; padding-inline: 16px; padding-block: 8px; inline-size: 200px; background: lavender; }
</style>
<div class="box">Centered with margin-inline</div>inline-start следует за направлением текста:
<style>
p { border-inline-start: 4px solid teal; padding-inline-start: 8px; }
</style>
<p>English: the line is on the left.</p>
<p dir="rtl">Right-to-left text: the line is on the right.</p>Примечания
В языках с письмом слева направо margin-inline — это просто margin-left и margin-right, но в арабском или иврите стороны меняются местами сами. inset: 0 вместе с position: absolute растягивает элемент на весь контейнер.
См. также
- margin — Внешний отступ элемента — расстояние до соседей.
- padding — Внутренний отступ между содержимым и рамкой элемента.
- top, right, bottom, left — Смещения позиционированного элемента от краёв области отсчёта: сверху, справа, снизу и слева.
В учебнике
- Логические свойства — Свойства, которые зависят от направления текста, а не от сторон экрана — margin-inline, padding-block, inline-size, inset-inline и writing-mode.