デザインデータで見出しの下の余白が24pxと指定されていたので、そのとおり margin-bottom: 24px と書いた。ブラウザで見ると、なぜか広く見える。
定規で測ると確かに24pxありますが、見た目は合っていません。デザイナーからは「もう少し詰めてください」と言われ、実装側は「指定どおりです」と答える。この往復は、どちらも間違っていないのに起きます。
余白は、あなたが書いた分だけではない
原因は line-height です。行の高さが文字そのものの高さより大きいとき、余った分は文字の上下に均等に配分されます。 これをハーフレディング（half-leading）と呼びます。
font-size: 32px に line-height: 1.5 を指定すると行の高さは48pxになり、文字の上下にそれぞれ8pxずつの空きができます。ここに margin-bottom: 24px を足すと、視覚的な余白は32pxになります。デザインデータ側は文字の輪郭を基準に24pxと指定しているので、8px分ズレます。
見出しでは line-height を小さめに、本文では大きめにするのが普通なので、同じ margin を指定しても要素ごとにズレ幅が変わります。 これが「全体的に余白が合っていない」という指摘の正体です。
これまでの対処は、だいたい次のどれかでした。
- ネガティブマージンでズレ分を引く（
margin-bottom: 16pxにして帳尻を合わせる） - 見出しだけ
line-height: 1にする（日本語だと行が詰まりすぎる） ::before/::afterで擬似要素を作り、負のマージンを当てる
どれも動きますが、フォントを変えた瞬間に全部ズレます。 ハーフレディングの量はフォントごとの数値（アセント・ディセント）で決まるので、和文フォントを差し替えたりウェイトを変えたりすると、調整値の再計算が発生します。ネガティブマージンが散らばったCSSは、この再計算がどこまで必要か分からない状態になります。
この余白を削るプロパティが、主要ブラウザに揃った
CSS 側にはこれを直接扱う仕組みがあります。text-box-trim と text-box-edge、およびその一括指定の text-box です。
Safari は 18.2（2024年12月）、Chrome と Edge は 133（2025年2月）で対応していましたが、Firefox が未対応のため実務では使いにくい状態が続いていました。2026年8月18日にリリースされた Firefox 154 が対応し、主要ブラウザが揃いました。
書き方は次のとおりです。
h2 {
font-size: 2rem;
line-height: 1.4;
/* 上下のハーフレディングを削る */
text-box-trim: trim-both;
/* 上は大文字の高さまで、下はベースラインまで */
text-box-edge: cap alphabetic;
}
/* 一括指定 */
h2 {
text-box: trim-both cap alphabetic;
}text-box-trim は削る側を指定します（trim-start / trim-end / trim-both / none）。text-box-edge はどこまで削るかの基準です。cap は大文字の上端、ex は小文字の高さ、alphabetic はベースラインを指します。
これを当てておけば、margin に書いた数値がそのまま見た目の余白になります。 デザインデータの指定値を写すだけでよくなり、ネガティブマージンによる調整が不要になります。
なお、Firefox 154 では同時に sibling-count() と sibling-index() も対応しました。要素の並び順に応じた指定を CSS だけで書けるもので、こちらは要素数に応じたレイアウトをCSSだけで組むにまとめています。同じリリースで両方が使えるようになったので、実装標準を見直すならまとめて扱うのが効率的です。
日本語のサイトで使うときに確認すること
cap や alphabetic はラテン文字を前提にした基準です。和文の字面はこれらの基準とぴったり一致しないため、指定した見た目になるかは実際のフォントで確認する必要があります。
仕様には和文向けの基準値も定義されていますが、フォントが対応する情報を持っているかどうかで結果が変わります。自社サイトで採用しているフォントで、次の3か所だけ実機で見比べておけば十分です。
- 見出し（大きい文字・詰まった行間） — ズレがいちばん目立つ
- 本文の段落（小さい文字・広い行間） — 削りすぎて詰まって見えないか
- 和欧混植の行 — 英数字と日本語が混ざる行で、上下の基準が揃って見えるか
見た目が合わない場合は、見出しだけに適用して本文には当てない、という部分適用で構いません。全部に一律で当てるプロパティではありません。
未対応の環境でどう見えるか
text-box-trim に対応していないブラウザでは、この宣言は単に無視されます。レイアウトが壊れるのではなく、いままでどおりハーフレディング込みの余白で表示されるだけです。
つまり、いまの実装に足しても危険がありません。対応環境では意図した余白になり、未対応環境ではこれまでと同じ見た目になります。ネガティブマージンで調整している既存コードから乗り換える場合だけは、両方が効いて削りすぎになるので、調整用の負のマージンを外すのを忘れないでください。
古い環境をどこまで見るかという判断そのものについては、State of CSS 2026を発注側が読み解くで、実装標準として何を握っておくべきかを整理しています。
要件として書いておく一行
デザインと実装の余白のズレは、仕様書に一行あるだけで往復が減ります。
余白の指定値は、フォントのハーフレディングを除いた文字の輪郭を基準とする。
この一行があると、実装側は text-box-trim を当てる前提で組み、デザイン側は指定値をそのまま渡せます。ない場合、どちらの基準で測るかが検収の場で初めて議論になります。
次にやること
運用中のサイトがあるなら、CSSを検索して margin に負の値が入っている箇所を数えてください。 見出しやボタンのラベル周りに集中している場合、その多くはハーフレディングの調整です。フォントを変える予定があるなら、そこが作業量の見積もりに直結します。
これから作る、あるいはリニューアルする場合は、見出しのスタイル定義に text-box-trim を入れるかどうかを最初に決めてください。 あとから入れると、既存の調整値をすべて棚卸しすることになります。
サイトのリニューアル、既存サイトのデザインシステム整備、余白やタイポグラフィの実装標準の策定については、グリームハブのHP制作・リニューアル相談で承っています。既存実装の構成によって改修範囲が変わるため、個別にお見積りします。お問い合わせからご相談ください。
