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

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

初期値0
適用対象ブロックコンテナ要素
継承継承する
メディアvisual
計算値absolute <length>
アニメーションの種類個別
正規順序per grammar

構文

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 の定義
草案 初回定義。

ブラウザーの対応

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
基本対応 ? ? ? ? 47 ?
機能 Android Webview Chrome for Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本対応 59 59 ? ? ? 47 ?

関連情報

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

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