CSS Units

CSS units tell the browser how big something should be. Absolute units like px are fixed, while relative units such as rem, em, % and vw scale with something else, which makes layouts flexible and accessible.

Common CSS Units

• px: a fixed CSS pixel; good for borders and small details
• rem: relative to the root (html) font size, usually 16px
• em: relative to the current element's font size
• %: relative to the parent (for width, the parent's width)
• vw / vh: 1% of the viewport width / height
• ch: the width of the "0" character; great for limiting line length

rem vs em

rem always looks at the root font size, so it is predictable. em compounds: an em inside an em-sized parent multiplies. Use rem for font sizes and spacing, and em when something should scale with its own text, like button padding.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Example</title>
<style>
html { font-size: 16px; }
.parent { font-size: 1.5em; }   /* 24px */
.em { font-size: 1.5em; }       /* 1.5 x 24 = 36px */
.rem { font-size: 1.5rem; }     /* 1.5 x 16 = 24px */
button { font-size: 1rem; padding: 0.5em 1em; }
.big { font-size: 1.5rem; }
</style>
</head>
<body>
<div class="parent">
  <p class="em">1.5em (compounded)</p>
  <p class="rem">1.5rem (from root)</p>
</div>
<button>Normal</button> <button class="big">Bigger, padding scales too</button>
</body>
</html>

Viewport Units and Percentages

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Example</title>
<style>
body { margin: 0; font-family: sans-serif; }
.full { height: 50vh; background: #c7d2fe; display: grid; place-items: center; }
.half { width: 50%; background: #fbcfe8; padding: 10px; }
.read { max-width: 45ch; }
</style>
</head>
<body>
<div class="full">50vh tall: half the window height</div>
<div class="half">50% of the parent width</div>
<p class="read">This paragraph is limited to about 45 characters per line, which keeps text comfortable to read on wide screens.</p>
</body>
</html>

calc() and clamp()

calc() mixes units: width: calc(100% - 40px). clamp(min, preferred, max) keeps a value between limits, which is perfect for fluid font sizes.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Example</title>
<style>
h1 { font-size: clamp(1.5rem, 5vw, 3rem); }
.bar { width: calc(100% - 40px); margin: 0 20px; height: 20px; background: teal; }
</style>
</head>
<body>
<h1>Resize the window</h1>
<div class="bar"></div>
</body>
</html>

Frequently asked questions

Should I use px or rem in CSS?

Use rem for font sizes and most spacing so the page respects the user's browser font setting. px is fine for borders and shadows.

What is the difference between em and rem?

em is relative to the element's own font size and can compound when nested; rem is always relative to the root font size.

What does 100vh mean?

100vh is the full height of the browser viewport. On mobile, consider 100dvh, which adjusts as the address bar shows and hides.