padding-inline

Определение и применение

Свойство padding-inline задаёт внутренний отступ в начале и в конце строки. Стороны выбираются по направлению письма, поэтому один стиль подходит для текста слева направо, справа налево и вертикальных надписей.

Как задавать внутренние отступы для разных направлений письма — в уроке «Блочная и строчная модель. Часть 1: области блока и отступы».

Попробуйте значения padding-inline

Переключайте направление письма и значение. Голубая область внутри рамки показывает внутренний отступ.

Значение свойства

padding-inline: 0

HTML и CSS примера
HTML
<div class="stage">
  <div class="container" dir="ltr" style="writing-mode: horizontal-tb">
    <div class="demo-target"><span>Начало → конец</span></div>
  </div>
</div>
CSS
* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 340px;
  padding: 16px;
  background: white;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.container {
  display: flow-root;
  width: 100%;
  min-height: 175px;
  background: #fff0bf;
  border: 1px dashed #6d5d32;
}
.demo-target {
  width: fit-content;
  background: #b9d7eb;
  outline: 1px solid #245a85;
  padding-inline: 0;
}
.demo-target span {
  display: block;
  padding: 6px;
  background: white;
}

Поддержка браузерами

Спецификация: CSS logical

Поддерживается во всех основных браузерах с 2021 года.

Показать браузеры
Совместимостьcss.properties.padding-inline
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
padding-inline✓87✓87✓66✓73✓14.1✓87✓66✓62✓14.5✓14.0✓87✓14.5

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

CSS синтаксис:

CSS
padding-inline: <length-percentage [0,∞]>{1,2};

/* Глобальные значения */
padding-inline: initial | inherit | unset | revert | revert-layer;

{1,2} означает одно или два значения: первое для начала оси, второе для конца; одно применяется к обеим сторонам. <length-percentage [0,∞]> — длина или процент не меньше нуля.

JavaScript синтаксис:

JavaScript
element.style.paddingInline = "1rem 2rem";

Начальное значение свойства

  • padding-inline-start — 0.
  • padding-inline-end — 0.

Значения свойства

Значения padding-inline
Значение Описание
<length> Длина, например 16px или 1rem. Внутренние отступы увеличивают область между содержимым и рамкой; отрицательные значения запрещены.
<percentage> Процент от логической ширины содержащего блока — размера вдоль его строчной оси. Даже отступ перед блоком не следует автоматически рассчитывать от высоты.
initial Устанавливает начальное значение свойства.
inherit Наследует вычисленное значение свойства у родительского элемента.
unset Для ненаследуемого свойства padding-inline устанавливает его начальное значение свойства.
revert Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
revert-layer Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

От логической стороны к физической

При writing-mode: horizontal-tb отступ находится слева и справа. При direction: rtl начало и конец строки меняются местами. В вертикальном письме строчная ось идёт вертикально.

Не задавайте одновременно логический и физический отступ одной стороны без необходимости: после сопоставления сторон они конкурируют по обычным правилам каскада. Внутренний отступ закрашивается фоном и не схлопывается. При box-sizing: content-box он добавляется к заданному размеру, при border-box входит в него.

Чем отличается от padding-left, padding-right, padding, padding-block

  • padding-left и padding-right привязаны к физическим сторонам элемента. padding-inline выбирает стороны по направлению письма: при writing-mode: vertical-rl строчная ось идёт вертикально. Это позволяет использовать один стиль в разных режимах письма.
  • padding задаёт отступы всех четырёх сторон. padding-inline затрагивает только две стороны выбранной оси, сохраняя остальные.
  • padding-inline-start и padding-inline-end позволяют настраивать стороны отдельно. padding-block относится к другой оси и не заменяет padding-inline.
CSS
.card {
  padding: 8px;
  padding-inline: 12px 24px;
}

Сначала со всех сторон задано по 8px, затем padding-inline меняет только выбранную пару. Отступы по остальным сторонам остаются равными 8px.

Спецификация

CSS Logical Properties and Values — padding-inline.

Наследуется

Нет.

Анимируемое

Да, по вычисленному значению: промежуточные значения рассчитываются плавно.

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

Отступы по направлению строки

У блока заданы разные отступы: в начале оси меньше, в конце больше. В HTML замените dir="ltr" на dir="rtl": стороны поменяются местами. Цвет фона заполняет внутренний отступ.

base.css
CSS
body {
    margin: 1rem;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #243342;
    background: #fff;
}
* {
    box-sizing: border-box;
}
.frame {
    display: flow-root;
    border: 2px dashed #64748b;
    min-height: 180px;
}
.sample {
    width: fit-content;
    background: #fef3c7;
    border: 2px solid #92400e;
}
index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Отступы по направлению строки</title>
  </head>
  <body>
    <div class="frame"><div class="sample" dir="ltr">Заметки о прогулке</div></div>
  </body>
</html>
style.css
CSS
.sample {
    writing-mode: horizontal-tb;
    padding-inline: 12px 40px;
}