When you position an element absolutely using top: 0 or bottom: 0, CSS aligns the outer boundary of the element's box—not the actual typographic features of the glyphs. Because fonts incorporate intrinsic internal leading, ascender heights, and descender space, a letter like “X” rarely sits flush against the corners of its container.

If you need your text to align precisely by its cap height (at the top) and its baseline (at the bottom), modern CSS provides multiple viable strategies depending on your target browser support.

The Root Problem: The Typographic Box Model

In CSS, text rendering is governed by font metrics. Even with line-height: 1, glyphs carry internal whitespace:

  • Top gap: The space between the cap height (the top of flat capital letters like “H” or “X”) and the ascender box edge.
  • Bottom gap: The space below the baseline reserved for descenders (such as in “p”, “g”, or “y”).

Here is how to eliminate this space and achieve pixel-perfect alignment.

Solution 1: The Modern CSS Standard (text-box-trim)

The CSS Inline Layout Module Level 3 introduced text-box-trim and text-box-edge (previously discussed as leading-trim). This is the definitive, specification-backed way to strip typographic whitespace from text.

.container {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid currentColor;
}

.top-right {
  position: absolute;
  top: 0;
  right: 0;
  line-height: 1;
  text-box-trim: trim-start;
  text-box-edge: cap;
}

.bottom-left {
  position: absolute;
  bottom: 0;
  left: 0;
  line-height: 1;
  text-box-trim: trim-end;
  text-box-edge: alphabetic;
}

How it works: Setting text-box-edge: cap crops the top boundary directly to the cap height, while text-box-edge: alphabetic clamps the bottom boundary right to the baseline. As modern rendering engines adopt this feature (Safari 18.2+, Chrome 133+), it provides the cleanest, purest CSS solution without manual offset hacks.

Solution 2: Using the cap Unit with calc()

If you need wide browser support today across modern browsers, you can use the cap unit. Available across all major modern evergreen browsers, 1cap equals the exact cap height of the first available font.

By forcing line-height: 0 or combining 1cap with offset positioning, you can mathematically align text:

.container {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid currentColor;
  font-size: 24px;
}

/* Top-Right: Align cap height to top: 0 */
.top-right {
  position: absolute;
  top: 0;
  right: 0;
  line-height: 0;
  padding-top: 1cap; /* Pushes the baseline down by the cap height */
}

/* Bottom-Left: Align baseline to bottom: 0 */
.bottom-left {
  position: absolute;
  bottom: 0;
  left: 0;
  line-height: 0;
  /* With line-height: 0, the baseline sits directly on bottom: 0 */
}

Why this works: When you set line-height: 0 on an inline or inline-block element, the line box collapses down to the baseline. This places the baseline at the exact vertical reference point of the element. For the bottom element, bottom: 0 puts the baseline squarely against the container boundary.

Solution 3: Rock-Solid Cross-Browser Alignment Using SVG

If legacy browser compatibility is mandatory and you cannot risk font-metric variance across operating systems, inline SVG provides absolute control over typographic baselines using the dominant-baseline attribute:

<div class="container">
  <svg class="bottom-left" viewBox="0 0 20 20" width="20" height="20">
    <text x="0" y="20" dominant-baseline="alphabetic">X</text>
  </svg>

  <svg class="top-right" viewBox="0 0 20 20" width="20" height="20">
    <text x="20" y="0" text-anchor="end" dominant-baseline="hanging">X</text>
  </svg>
</div>

.bottom-left {
  position: absolute;
  bottom: 0;
  left: 0;
  overflow: visible;
}

.top-right {
  position: absolute;
  top: 0;
  right: 0;
  overflow: visible;
}

SVG text rendering allows you to declare dominant-baseline="alphabetic" or dominant-baseline="hanging" (or text-before-edge), locking the text to coordinates independent of HTML line-box limitations.

Summary: Which Method Should You Choose?

  • Best for Modern Projects: Use text-box-trim and text-box-edge for future-proof, semantics-preserving code.
  • Best for Immediate CSS-Only Support: Use line-height: 0 combined with the 1cap unit.
  • Best for Strict Precision / Legacy Browsers: Use inline SVG with dominant-baseline.