CSS свойство margin-inline-start

Предыдущая страница margin-inline-end
Следующая страница margin-left

Определение и использование

margin-inline-start Атрибут определяет начальный край的外нее поле для направленного ряда.

CSS margin-inline и margin-block атрибуты связаны с margin-top,margin-bottom,margin-left и margin-right атрибуты очень похожи, но margin-inline и margin-block атрибут зависит от блокового направления и направления inline.

Примечание:связанные CSS-атрибуты writing-mode и direction определяет направление inline. Это влияет на начальную и конечную позиции элемента, а также margin-inline-start Результат атрибута. Для английских страниц, блоковое направление направлено вниз, а направление inline направлено слева направо.

Пример

Пример 1

Установите отступ начальной точки inline-направления:

div {
  margin-inline-start: 35px;
}

Попробуйте сами

Пример 2

Когда значение атрибута writing-mode Когда значение атрибута 'vertical-rl' установлено, направление inline направлено вниз. Результатом является то, что начальная точка элемента перемещается из левого края в верхнюю часть:

div {
  margin-inline-start: 50px;
  writing-mode: vertical-rl;
}

Попробуйте сами

Пример 3

Когда значение атрибута direction Когда значение атрибута 'rtl' установлено, направление inline направлено слева направо. Результатом является то, что начальная точка элемента визуально начинается с原本 левого края, но из-за направления слева направо, эффект макета может измениться:

div {
  margin-inline-start: 50px;
  direction: rtl;
}

Попробуйте сами

Синтаксис CSS

margin-inline-start: auto|length|initial|inherit;

Значение атрибута

Значение	Описание
auto	Значение по умолчанию. Значение по умолчанию для margin-inline-start элемента.
length	margin-inline-start может быть указан в единицах px, pt, cm и т.д. Допускаются отрицательные значения. См.:Единицы CSS.
%	margin-inline-start определяет размер отступа в процентах от размера родительского элемента по направлению inline.
initial	Этот атрибут устанавливается в значение по умолчанию. См.: initial.
inherit	Этот атрибут наследуется от родительского элемента. См.: inherit.

Технические детали

Значение по умолчанию:	auto
Инheritability:	Нет
Создание анимации:	Поддерживается. См.:Свойства анимации.
Версия:	CSS3
Синтаксис JavaScript:	object.style.marginInlineStart="50px"