CSSmarkup~10 mins

Relative units in CSS - Browser Rendering Trace

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Render Flow - Relative units

[Parse CSS] -> [Identify units: px, em, rem, %] -> [Calculate base values] -> [Compute relative sizes] -> [Apply computed sizes to elements] -> [Layout elements] -> [Paint]

The browser reads CSS and finds units like em, rem, and %. It calculates sizes based on related elements or root font size, then applies these sizes during layout and painting.

Render Steps - 3 Steps

Code Added::root { font-size: 16px; }

Before

[Browser default font size]
[Container width: auto]
[Text font size: default]

→

After

[Root font size set to 16px]
[Container width: auto]
[Text font size: default]

Setting root font size to 16px establishes a base for rem units.

🔧 Browser Action:Stores root font size for rem calculations

Code Sample

A box that is half the browser width with padding and text sized relative to root font size.

CSS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Relative Units Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <p class="text">This text uses relative units.</p>
  </div>
</body>
</html>

CSS

:root {
  font-size: 16px;
}
.container {
  width: 50%;
  padding: 2em;
  border: 1px solid black;
}
.text {
  font-size: 1.5rem;
  margin-top: 1em;
}

Render Quiz - 3 Questions

Test your understanding

After applying step 2, what is the width of the container relative to the browser window?

A50% of the text inside the container

B50% of the browser window width

C16px fixed width

D100% of the browser window width

Common Confusions - 3 Topics

Why does padding in em change if I change the font size of the container?

Because em units are relative to the element's own font size, changing the container's font size changes the padding size visually (see step 2).

💡 em units scale with the element's font size, so padding and margins using em grow or shrink if font size changes.

Why does 1rem always stay the same size even if I change the font size of a child element?

rem units always refer to the root font size, so they stay consistent regardless of where they are used (see step 3).

💡 Use rem for consistent sizing across the page, unaffected by nested font changes.

Why does width: 50% make the container half the browser width, not half the text size?

Percentages for width are relative to the parent element's width, not font size (see step 2).

💡 Percent units relate to container dimensions, not text size.

Property Reference

Property	Value Applied	Reference Point	Visual Effect	Common Use
font-size	px	Absolute pixel size	Fixed size regardless of context	Precise control
font-size	em	Parent element's font size	Scales relative to parent	Nested scaling
font-size	rem	Root element's font size	Scales relative to root	Consistent scaling
width	%	Parent element's width	Size relative to container	Responsive layouts
padding	em	Element's font size	Spacing relative to text size	Flexible spacing

Concept Snapshot

Relative units scale sizes based on context: - em: relative to element's font size - rem: relative to root font size - %: relative to parent dimension Use em for flexible spacing, rem for consistent text size, % for responsive widths.