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

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

элемента padding-inline означает пространство от рамки до содержимого в направлении в Inline. Это сокращение для следующих свойств:

padding-inline Значение свойства можно установить несколькими способами:

Если у свойства padding-inline два значения:

padding-inline: 10px 50px;
  • Внутренний отступ начала составляет 10px
  • Внутренний отступ конца составляет 50px

Если у атрибута padding-inline есть значение:

padding-inline: 10px;
  • Отступы с начала и конца 10px

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 Результат атрибута. Для английских страниц, блоковое направление направлено вниз, а направление inline направлено слева направо.

Пример

Пример 1

Установить отступы с обеих сторон в направлении inline:

div {
  padding-inline: 50px;
}

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

Пример 2

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

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

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

Пример 3

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

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

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

Синтаксис CSS

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

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

Значение Описание
auto По умолчанию. Значение по умолчанию для padding-inline элемента.
length

Указать расстояние в px, pt, cm и других единицах измерения. Отрицательные значения не допускаются.

См. также:Единицы CSS.
% Указать расстояние в процентах от размера родительского элемента в направлении inline.
initial Установить этот атрибут в его значение по умолчанию. См. также initial.
inherit Этот атрибут наследуется от родительского элемента. См. также inherit.

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

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

Поддержка браузеров

Числа в таблице показывают версию первого браузера, который полностью поддерживает этот атрибут.

Кروм Эдж Фаерфокс Сафари Опера
87.0 87.0 66.0 14.1 73.0

Связанные страницы

См. также:Свойство direction в CSS

См. также:Свойство padding-inline-end в CSS

См. также:Свойство padding-inline-start в CSS

См. также:Свойство padding-bottom в CSS

См. также:Свойство padding-left в CSS

См. также:Свойство padding-right в CSS

См. также:Свойство padding-top в CSS

См. также:Свойство writing-mode в CSS