A heading that sits on its own cap height

Q: What is the difference between text-box-trim and text-box-edge?

text-box-trim says which side to cut (trim-start, trim-end or trim-both), and text-box-edge says which font metric to cut to, such as cap alphabetic. The text-box shorthand sets both in one declaration, trim keyword first.

Q: How do I remove the space above text without text-box-trim?

Use a negative margin-block worked out from the line height and the font's cap height, often generated by tools such as Capsize. That margin has to go when you add the trim, or supporting browsers subtract the space twice.

Live demo

Half-leading the box is taller than the type Half-leading trimmed to cap and baseline

Caveat and fallback

CaveatIt trims the block box, not every line: a heading that wraps keeps the full leading between its lines and only loses it above the first and below the last. The amount comes from the first available font's metrics, so a web font that arrives after the fallback drew the first frame trims by a different number and the heading shifts on load — the same jump size-adjust exists to fix. And the edge values are metric names rather than lengths: cap alphabetic cuts to the capital height and the baseline, which is what a display line wants, while text cuts to the font's own ascent and descent and barely moves anything.

FallbackAn engine without it ignores the declaration and leaves the ordinary half-leading above and below — the gap that used to be corrected with a negative margin. So this has to replace that margin rather than sit on top of it: keep both and the engines that support the trim take the space out twice.

Source code

CSS

h1 {
  line-height: 1.6;

  /* cut the box to the cap line and
     the baseline. block box only —
     wrapped lines keep their leading */
  text-box: trim-both cap alphabetic;

  /* and delete the old hack */
  margin-block: 0;
}

Published 29 Aug 2026

Questions

What is the difference between text-box-trim and text-box-edge?

text-box-trim says which side to cut (trim-start, trim-end or trim-both), and text-box-edge says which font metric to cut to, such as cap alphabetic. The text-box shorthand sets both in one declaration, trim keyword first.

Why does text-box-trim not reduce the space between lines?

It only removes the half-leading above the first line and below the last one. The gaps between wrapped lines still come from line-height, so a two-line heading needs a tighter line-height as well as the trim.

How do I remove the space above text without text-box-trim?

Use a negative margin-block worked out from the line height and the font's cap height, often generated by tools such as Capsize. That margin has to go when you add the trim, or supporting browsers subtract the space twice.