CSS Units Explained (px, %, em, rem, vh, vw)

In CSS, units define the size of elements – whether it’s width, height, font size, or spacing. Understanding CSS units is essential for creating flexible and responsive designs that look good across different devices.

What Are CSS Units?

CSS units determine how measurements are applied in your design. They can be absolute (fixed values like px) or relative (values that adapt based on the parent element, root element, or viewport size).

Example:

p {
  font-size: 16px;   /* Absolute unit */
  margin: 5%;        /* Relative unit */
}

p {
  font-size: 16px;   /* Absolute unit */
  margin: 5%;        /* Relative unit */
}

Absolute Units

Absolute units are fixed and do not change based on the screen or parent element.

• px (pixels) → Most commonly used, fixed size.
• cm, mm, in, pt, pc → Rarely used in web design (more for print).

Example:

div {
  width: 200px;
  height: 100px;
}

div {
  width: 200px;
  height: 100px;
}

👉 The size will stay the same on all screens.

Relative Units

Relative units adjust based on parent element, root element, or viewport. They make designs flexible and responsive.

a) Percentage (%)

Relative to the parent element’s size.

div {
  width: 80%; /* 80% of parent width */
}

div {
  width: 80%; /* 80% of parent width */
}

b) em

Relative to the font-size of the parent element.

p {
  font-size: 1.5em; /* 1.5 × parent’s font size */
}

p {
  font-size: 1.5em; /* 1.5 × parent’s font size */
}

c) rem (root em)

Relative to the font-size of the root element (html).

html {
  font-size: 16px;
}
p {
  font-size: 2rem; /* 2 × 16px = 32px */
}

html {
  font-size: 16px;
}
p {
  font-size: 2rem; /* 2 × 16px = 32px */
}

👉 More consistent than em because it always refers to the root.

Viewport Units

Viewport units adjust based on the size of the browser window.

• vw = 1% of viewport width
• vh = 1% of viewport height
• vmin = smaller of vw or vh
• vmax = larger of vw or vh

Example:

div {
  width: 50vw;  /* 50% of browser width */
  height: 50vh; /* 50% of browser height */
}

div {
  width: 50vw;  /* 50% of browser width */
  height: 50vh; /* 50% of browser height */
}

👉 Useful for fullscreen layouts and responsive typography.

Combining Units

You can mix units to create balanced, responsive designs.

Example:

div {
  width: 80%;
  padding: 2rem;
  font-size: 1.2em;
}

div {
  width: 80%;
  padding: 2rem;
  font-size: 1.2em;
}

Common Mistakes Beginners Make

1. Using only px → makes layouts non-responsive.
2. Confusing em and rem.
3. Forgetting that % depends on parent element size.
4. Overusing vh and vw → can cause overflow issues on small screens.

Quick Reference Summary

Practice Challenge

1. Set the html font-size to 16px.
2. Create a <div> with:
   • width: 60%
   • padding: 2rem
   • font-size: 1.5em
3. Add a header with font-size: 5vw so it scales with browser width.

Conclusion

By mastering CSS units, you can create designs that are both precise and adaptable. Use absolute units (px) for fixed elements, and relative/viewport units (%, em, rem, vh, vw) for responsive layouts.