Свойство CSS padding-inline-start

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

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

элемента padding-inline-start атрибуты указывают на пространство между рамкой и содержимым в начале inline.

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

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

Пример

Пример 1

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

div {
  padding-inline-start: 50px;
}

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

Пример 2

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

div {
  writing-mode: vertical-rl;
  padding-inline-start: 100px;
}

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

Пример 3

Установить атрибут <div> элемента direction Когда значение атрибута установлено в rtl, направление inline направлено слева направо. Результатом является перемещение начальной позиции элемента из левого края в правый край:

div {
  direction: rtl;
  padding-inline-start: 100px;
}

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

CSS синтаксис

padding-inline-start: auto|value|initial|inherit;

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

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

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

Значение по умолчанию:	auto
Ингерит:	Нет
Создание анимации:	Поддерживается. См. также:Атрибуты, связанные с анимацией.
Версия:	CSS3
JavaScript синтаксис:	object.style.paddingInlineStart="100px"