line-height-step

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

line-height-step は CSS のプロパティで、行ボックスの高さにおける刻みの単位を設定します。このプロパティが設定された場合、行ボックスの高さは単位の倍数のうち最も近いものに切り上げられます。

css
/* ポイント値 */
line-height-step: 18pt;

/* グローバル値 */
line-height-step: inherit;
line-height-step: initial;
line-height-step: revert;
line-height-step: revert-layer;
line-height-step: unset;

構文

line-height-step プロパティは、以下のうちの一つで指定します。

  • <length> です。

<length>

指定された <length> が、行ボックスの高さの刻みの計算に使用されます。

公式定義

初期値0
適用対象ブロックコンテナー
継承あり
計算値絶対的な長さ
アニメーションの種類計算値の型による

形式文法

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

行ボックスの高さに刻みの単位を設定

以下の例では、それぞれの段落の行ボックスの高さは、刻みの単位に切り上げられます。 <h1> の行ボックスの高さは 1 つの刻みに収まらないので 2 つ分を占有しますが、その中の中央に配置されます。

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

これらのルールの結果は、次のスクリーンショットのようになります。

どのように line-height-step プロパティがテキストの表示に影響するか

仕様書

Specification
CSS Rhythmic Sizing
# line-height-step

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
line-height-step
Experimental

Legend

Tip: you can click/tap on a cell for more information.

No support
No support
Experimental. Expect behavior to change in the future.
User must explicitly enable this feature.

関連情報