CSS Units

Every size in CSS needs a unit, such as 16px or 2rem. The unit decides what the number is measured against.

Absolute and Relative Units

There are two kinds of units:

Absolute units are always the same size. The only one you need on screens is px.
Relative units depend on something else: the parent, the font size or the screen.

Unit	Relative to	Good for
`px`	Nothing, a fixed size	Borders, small details
`%`	The parent element	Widths inside a container
`em`	The font size of the element itself	Padding that grows with the text
`rem`	The font size of the root `<html>` element	Font sizes and spacing
`vw`	1% of the viewport width	Full-width sections, big headings
`vh`	1% of the viewport height	Full-height sections
`dvh`	1% of the dynamic viewport height	Full-screen sections on phones
`ch`	The width of the "0" character	Line length of text

The viewport is the visible area of the browser window.

A value of 0 needs no unit. margin: 0; is correct.

px and %

px is simple and predictable. % is useful when a box should take part of its parent.

Example

css

.sidebar {
  width: 30%;      /* 30% of the parent's width */
  border: 1px solid #cccccc;
}

em and rem

By default, browsers use a font size of 16px, so 1rem is 16px.

rem always looks at the <html> font size. 2rem is 32px everywhere on the page.
em looks at the element's own font size. If a button has font-size: 20px, then padding: 0.5em is 10px.

Example

html

<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Arial, sans-serif; }
.btn {
  padding: 0.5em 1em;
  background-color: #264de4;
  color: white;
  border: none;
  border-radius: 0.3em;
}
.small { font-size: 0.875rem; }
.large { font-size: 1.5rem; }
</style>
</head>
<body>

<button class="btn small">Small</button>
<button class="btn">Normal</button>
<button class="btn large">Large</button>

</body>
</html>

Try it Yourself »

All three buttons share one rule. Because the padding is in em, the bigger button automatically gets bigger padding.

Use rem for font sizes. If a user sets a larger default font in their browser settings (many older people do), your whole page grows with it. Fixed px font sizes ignore that wish.

Be careful with em on nested elements: it multiplies. A 1.2em list inside another 1.2em list ends up 1.44 times bigger.

vw, vh and dvh

Viewport units let you size things against the screen.

Example

css

.hero {
  height: 100vh;     /* full height of the window */
}

On phones, 100vh has a problem. The browser's address bar slides in and out, so 100vh can be taller than the visible area, and the bottom gets hidden. Modern CSS fixes this with new units:

Unit	Height of the viewport when...
`svh`	the address bar is shown (the small viewport)
`lvh`	the address bar is hidden (the large viewport)
`dvh`	it is right now, updating as the bar moves (dynamic)

Example

html

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body { margin: 0; font-family: Arial, sans-serif; }
.hero {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  background-color: #0f172a;
  color: white;
  text-align: center;
}
.hero h1 { font-size: 8vw; margin: 0; }
</style>
</head>
<body>

<section class="hero">
  <h1>Learn to Code in Karachi</h1>
</section>

</body>
</html>

Try it Yourself »

Fluid Sizes with clamp()

A heading in vw grows with the screen, but it can get tiny on phones and huge on wide monitors. clamp() sets limits:

Example

css

h1 {
  font-size: clamp(1.75rem, 4vw + 1rem, 3.5rem);
}

The three values are minimum, preferred, maximum. The heading tries to be 4vw + 1rem, but never smaller than 1.75rem or bigger than 3.5rem. You will learn more in the CSS Math Functions chapter.

Which Unit Should I Use?

Font sizes: rem, or clamp() for headings
Spacing: rem, or em for padding inside buttons
Widths: %, fr in Grid, or max-width in rem or ch
Full-screen sections: dvh
Borders and shadows: px

Exercise

The <html> font size is 16px and a <div> has font-size: 20px. Inside that div, how big is 2rem?

40px32px20px36px