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

/* ポイント値 */
line-height-step: 18pt;
初期値0
適用対象ブロックコンテナー
継承あり
メディア視覚
計算値絶対的な長さ
アニメーションの種類個別
正規順序構文通り

構文

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

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

形式文法

<length>

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

: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 プロパティがテキストの表示に影響するか

仕様書

仕様書 状態 備考
CSS Rhythmic Sizing
line-height-step の定義
草案 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
line-height-step
実験的
Chrome 完全対応 60
無効
完全対応 60
無効
無効 From version 60: this feature is behind the --enable-blink-features=CSSSnapSize runtime flag.
Edge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 完全対応 47
無効
完全対応 47
無効
無効 From version 47: this feature is behind the --enable-blink-features=CSSSnapSize runtime flag.
Safari 未対応 なしWebView Android 完全対応 60
無効
完全対応 60
無効
無効 From version 60: this feature is behind the --enable-blink-features=CSSSnapSize runtime flag.
Chrome Android 完全対応 60
無効
完全対応 60
無効
無効 From version 60: this feature is behind the --enable-blink-features=CSSSnapSize runtime flag.
Firefox Android 未対応 なしOpera Android 完全対応 44
無効
完全対応 44
無効
無効 From version 44: this feature is behind the --enable-blink-features=CSSSnapSize runtime flag.
Safari iOS 未対応 なしSamsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mdnwebdocs-bot, mfuji09
最終更新者: mdnwebdocs-bot,