padding-inline-start

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

Свойство padding-inline-start задаёт внутренний отступ в начале строчной оси. Остальные стороны сохраняют свои значения.

Оси block и inline обозначают направление расположения блоков и направление строки. start — начало (англ. start), end — конец (англ. end) выбранной оси.

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

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

Сравните цветное пространство между белым содержимым и рамкой трёх блоков. Выберите значение, затем переключите направление письма: физическая сторона изменится по выбранной оси.

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

padding-inline-start: 0

HTML и CSS примера
HTML
<div class="stage">
  <div class="container" dir="ltr" style="writing-mode: horizontal-tb">
    <div class="demo-target"><span>1</span></div>
    <div class="demo-target"><span>2</span></div>
    <div class="demo-target"><span>3</span></div>
  </div>
</div>
CSS
* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 400px;
  color: #172c3d;
  font: 16px/1.5 system-ui;
  background: #fff;
  padding: 6px;
}
.container {
  display: flow-root;
  width: 100%;
  height: 210px;
  background: #fff0bf;
  outline: 1px dashed #64748b;
}
.demo-target {
  border: 1px solid #245a85;
  background: #b9d7eb;
  padding-inline-start: 0;
}
.demo-target span {
  display: block;
  background: #fff;
}

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

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

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

Показать браузеры
Совместимостьcss.properties.padding-inline-start
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
padding-inline-start✓69✓79✓41✓56✓12.1✓69✓41✓48✓12.2✓10.0✓87✓12.2

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

CSS синтаксис:

CSS
padding-inline-start: <length-percentage [0,∞]>;

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

<length-percentage> — длина или процент, а диапазон [0,∞] запрещает отрицательные значения. Свойство принимает одно значение.

JavaScript синтаксис:

JavaScript
element.style.paddingInlineStart = "24px";

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

0.

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

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

Как выбирается физическая сторона

При горизонтальном письме отступ находится слева для dir="ltr" и справа для dir="rtl". При writing-mode: vertical-rl, direction: ltr и text-orientation: mixed отступ находится сверху.

Логическое и физическое свойства, которые попали на одну сторону, конкурируют по обычным правилам каскада. Позднее сокращение может перезаписать ранее заданную составляющую.

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

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

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

Особенности применения

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

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

CSS Logical Properties and Values — padding-inline-start.

Наследуется

Нет.

Анимируемое

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

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

Расстояние от текста до рамки

Измените padding-inline-start у трёх блоков и сравните результат. В HTML замените dir="ltr" на dir="rtl", затем задайте контейнеру writing-mode: vertical-rl. Для строчной оси начало и конец меняются местами при смене направления.

base.css
CSS
body {
    margin: 16px;
    background: white;
}
* {
    box-sizing: border-box;
}
.stage {
    width: 100%;
    max-width: 400px;
    color: #172c3d;
    font: 16px/1.5 system-ui;
    background: #fff;
    padding: 6px;
}
.container {
    display: flow-root;
    width: 100%;
    height: 210px;
    background: #fff0bf;
    outline: 1px dashed #64748b;
}
.demo-target {
    border: 1px solid #245a85;
    background: #b9d7eb;
}
.demo-target span {
    display: block;
    background: #fff;
}
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="stage">
      <div class="container" dir="ltr">
        <div class="demo-target"><span>1</span></div>
        <div class="demo-target"><span>2</span></div>
        <div class="demo-target"><span>3</span></div>
      </div>
    </div>
  </body>
</html>
style.css
CSS
.container {
    writing-mode: horizontal-tb;
}
.demo-target {
    padding-inline-start: 24px;
}