line-height-step

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

Эта функция не относится к Baseline, так как она не работает в некоторых из наиболее широко используемых браузеров.

Экспериментально: Это экспериментальная технология
Перед использованием в производстве внимательно проверьте таблицу совместимости браузеров.

Свойство line-height-step CSS устанавливает единицу шага для высот линий. При установке свойства высота линий округляется до ближайшего кратного этой единицы.

Синтаксис

/* Point values */
line-height-step: 18pt;

/* Global values */
line-height-step: inherit;
line-height-step: initial;
line-height-step: revert;
line-height-step: revert-layer;
line-height-step: unset;

Свойство line-height-step задаётся любым из следующих значений:

a <length>.

Значения

<length>: Указанная <length> используется в вычислении шага высоты линии.

Формальное определение

Начальное значение	`0`
Применимо к	блочным контейнерам
Наследуется	да
Вычисленное значение	абсолютная `<length>`
Тип анимации	по типу вычисленного значения

Формальный синтаксис

line-height-step = 
  <length [0,∞]>

Примеры

Установка единицы шага высоты линии

В следующем примере высота каждой строки в абзаце округляется до единицы шага. Строка в <h1> не помещается в одну единицу шага и поэтому занимает две, но при этом она все ещё центрируется внутри двух единиц шага.

:root {
  font-size: 12pt;
  --my-grid: 18pt;
  line-height-step: var(--my-grid);
}
h1 {
  font-size: 20pt;
  margin-top: calc(2 * var(--my-grid));
}

Результат этих правил показан ниже на скриншоте:

How the line-height-step property affects the appearance of text.

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

Спецификация
CSS Rhythmic Sizing # line-height-step

Совместимость браузеров

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`line-height-step`	60	79	Нет	47	Нет	60	Нет	Нет	Нет	Нет	Нет

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/line-height-step