Em
The em is a CSS relative length unit whose computed value is based on the applicable font size.
CSS in Depth, Second Edition
The CSS em unit represents a length relative to a relevant font size, with font-size values based on the inherited font size and other properties based on the current element’s font size.
- How it is used
- Uses ems to keep typography and nearby component dimensions proportional as font sizes change.
- How deep it goes
- Works through computed lengths, calculation order, nested-size compounding, and component resizing using CSS examples.
- Examples
- Uses padded boxes, nested lists, scalable panels, and navigation spacing to show where em values help or compound.
- What you can do after
- Apply it via CSS declarations to scale components and choose spacing that responds to font-size changes.
Tiny CSS Projects
The CSS em unit expresses a length relative to the font size of the relevant element or inherited context.
- How it is used
- Uses em to scale custom form controls with text and enlarge a decorative drop cap.
- How deep it goes
- Explains em through pixel calculations and worked CSS dimensions, without pursuing CSS sizing rules beyond these examples.
- Examples
- Shows a `12px` parent producing `6px` text, em-sized radio and check boxes, and a `6em` drop cap.
- What you can do after
- Build it from scratch: size custom radio and check box visuals so they scale with their text.
Math for Web Design
em is a CSS relative length unit whose value is based on the computed font size of the relevant element.
- How it is used
- Sizes CSS text and other lengths relative to the relevant element’s computed font size, including responsive media-query breakpoints.
- How deep it goes
- Explains conversion, inheritance multiplication, formulas, and worked heading calculations, while deferring broader CSS rendering details.
- Examples
- Uses nested parent-and-child text, compounded headings, pixel calculations, and em-based media-query breakpoints.
- What you can do after
- Apply em calculations to predict rendered sizes and diagnose unexpected growth in nested typography.
Web Design Playground
A CSS font-relative length unit whose computed size is based on the font size of the element or its context.
- How it is used
- Supports responsive, user-respecting typography instead of fixed pixel sizes.
- How deep it goes
- Defines relative sizing and demonstrates inherited font-size calculations, but stops short of a broader CSS inheritance treatment.
- Examples
- Uses 1.5em and 3em conversions plus nested body, header, and h1 rules to illustrate scaling and inheritance.
- What you can do after
- Apply em values to create typography that follows browser defaults and user-selected text sizes.
Related concepts
- font-size propertyuses · The CSS font-size property specifies the nominal size of an element’s rendered text.
- relative valuekind of · A relative value expresses a quantity in relation to a contextual reference quantity rather than as an absolute value.
- remcontrasts with · The rem is a CSS relative length unit whose value equals the computed font size of the document’s root element.
- paddingused by · Padding is the addition of extra space, values, or data around or within a structure to satisfy size, alignment, layout, or processing requirements.
- border-radiusconfigures · The CSS border-radius property specifies the radii of an element’s corners, producing rounded corners.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.