CSS Units

Absolute Units

Fixed-size units that don't change based on context.

px (Pixels)

Most common absolute unit:

.container {
  width: 960px;
  padding: 16px;
  font-size: 14px;
  border: 1px solid black;
}

Other Absolute Units

/* Physical units (rarely used) */
.width { width: 10cm; }   /* Centimeters */
.width { width: 100mm; }  /* Millimeters */
.width { width: 5in; }    /* Inches */
.width { width: 25pc; }   /* Picas */
.width { width: 72pt; }   /* Points */

When to Use Absolute Units

• Borders: border: 1px solid
• Shadows: box-shadow: 0 2px 4px
• Small, precise adjustments
• When you need exact pixel control

Best Practice

/* Avoid */
.container {
  width: 960px; /* Fixed, not responsive */
}

/* Better */
.container {
  max-width: 960px;
  width: 100%;
}

Relative Units

Units that scale based on context.

em

Relative to parent font size:

.parent {
  font-size: 16px;
}

.child {
  font-size: 1.5em; /* 24px */
  padding: 1em;     /* 16px */
  margin: 0.5em;    /* 8px */
}

rem

Relative to root (html) font size:

html {
  font-size: 16px;
}

h1 {
  font-size: 2rem;  /* 32px */
}

p {
  font-size: 1rem;  /* 16px */
}

.container {
  padding: 1.5rem; /* 24px */
}

% (Percentage)

Relative to parent element:

.parent {
  width: 800px;
}

.child {
  width: 50%;   /* 400px */
  padding: 10%; /* 80px */
}

ex and ch

/* ex - height of lowercase 'x' */
.height { height: 2ex; }

/* ch - width of '0' character */
.width { width: 20ch; }

Unit Recommendations

Property	Recommended Unit
Font size	rem
Line height	unitless or em
Padding/Margin	rem or em
Width	%, vw, rem
Border	px
Shadow	px

Viewport Units

Relative to the browser viewport.

Basic Viewport Units

.hero {
  width: 100vw;    /* Full viewport width */
  height: 100vh;   /* Full viewport height */
}

.sidebar {
  width: 25vw;     /* 25% of viewport width */
}

.section {
  min-height: 50vh; /* At least half viewport */
}

Dynamic Viewport Units (Modern)

/* Accounts for mobile browser chrome */
.hero {
  height: 100dvh;  /* Dynamic viewport height */
  min-height: 100svh; /* Smallest viewport height */
  max-height: 100lvh; /* Largest viewport height */
}

Practical Uses

/* Full-screen hero */
.hero {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Sticky footer */
.content {
  min-height: calc(100vh - 100px);
}

/* Fluid typography */
h1 {
  font-size: clamp(2rem, 5vw, 4rem);
}

/* Responsive spacing */
.section {
  padding: 5vw;
}

Viewport Units vs Percentage

/* Percentage: relative to parent */
.parent { width: 800px; }
.child { width: 50%; } /* 400px */

/* Viewport: relative to browser */
.child { width: 50vw; } /* 50% of viewport */

Common Patterns

/* Full-screen section */
.full-screen {
  height: 100vh;
  display: grid;
  place-items: center;
}

/* Modal overlay */
.modal-overlay {
  position: fixed;
  width: 100vw;
  height: 100vh;
}

/* Responsive container */
.container {
  width: min(90vw, 1200px);
  margin: 0 auto;
}