Relative value
A relative value expresses a quantity in relation to a contextual reference quantity rather than as an absolute value.
CSS in Depth, Second Edition
A relative CSS unit specifies a size in relation to a font size, viewport dimension, or another reference size rather than as a fixed absolute measure.
- How it is used
- Supports responsive sizing by letting typography and component dimensions change with font-size or viewport references.
- How deep it goes
- Explains em and rem references through computed values and worked CSS, then applies them to responsive sizing and spacing choices.
- Examples
- Uses boxes with em-based padding and radius, a responsive panel, and navigation spacing converted from pixels.
- What you can do after
- Practice/perform unit selection to scale components with text, adjust page-wide sizing, and keep selected gaps in pixels.
Read how CSS in Depth, Second Edition explains relative value →
Web Design Playground, Second Edition
A relative CSS unit represents a dimension calculated from another size, such as an inherited, parent, root, or user-defined size.
- How it is used
- Uses relative units to preserve user-chosen text sizing and build layouts that adapt across screen sizes.
- How deep it goes
- Explains unit reference points, inheritance effects, responsive guidelines, and a worked px-to-rem header revision.
- Examples
- Demonstrates user-scaled typography, nested em sizing, a responsive header, and rem-percentage page spacing.
- What you can do after
- Apply relative CSS units to create responsive spacing, sizing, and typography that respond to user settings and viewport dimensions.
Read how Web Design Playground, Second Edition explains relative value →
Related concepts
- Gini coefficientequivalent to · A Gini coefficient is a summary measure of inequality derived from the area between a Lorenz curve and the line of perfect equality, typically ranging from zero for complete equality toward one for greater inequality.
- emincludes · The em is a CSS relative length unit whose computed value is based on the applicable font size.
- remincludes · The rem is a CSS relative length unit whose value equals the computed font size of the document’s root element.
- responsive web designused by · Responsive web design is an approach to designing websites whose layouts and presentation adapt to different screen sizes, viewports, and device characteristics.
- absolute unitcontrasts with · An absolute CSS length unit has a fixed reference magnitude or defined relationship to physical or CSS reference lengths rather than depending on surrounding layout.
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.