liveBook · Manning

Ex

As explained in Tiny CSS Projects

The CSS ex length unit represents a length relative to the x-height of the element's font.

The CSS ex unit measures length relative to the x-height of the element’s font—the distance between its baseline and meanline. Because it follows the typeface’s characteristics as well as font size, it helps size and space typography-related details consistently. section 10.8

Sizing an error icon

An error message uses a ::before pseudo-element for a consistent icon. Set its width and height to 1.25ex, align it to the baseline, and separate it from the text with .5ch. The ex unit makes the icon relate visually to the surrounding type. section 10.8

How Tiny CSS Projects covers it

How deep it goes
Defines x-height and demonstrates ex in a focused CSS rule, without exploring browser-specific behavior or broader unit mechanics.
Examples
Demonstrates 1.25ex width and height for an error icon inserted with ::before.
What it assumes
Assumes basic CSS declarations and font terminology while introducing x-height through a typography diagram.
What you can do after
Apply it via CSS to size and space interface details relative to a typeface’s x-height.
How it connects
Connects ex with CSS relative units, ch, typography, fonts, pseudo-elements, and baseline alignment.
Cover of Tiny CSS Projects
liveBookmanning.com
Read Tiny CSS Projects on liveBook Get the book at manning.com

This explainer was generated by Manning's knowledge graph from the text of Tiny CSS Projects. The section links point to the parts of the book it draws on.