In CSS, defining the height and width of elements is essential to controlling layout, spacing, and visual hierarchy. But with so many different units available, choosing the right one can be confusing.
In this blog post, we’ll explore the various units you can use to set height and width in CSS, including their behavior, use cases, and tips for choosing the right one.
📐 Types of Units in CSS
CSS offers two broad categories of units for defining size:
- Absolute units – Fixed measurements that don’t change regardless of screen size.
- Relative units – Flexible measurements based on other elements or the viewport.
Let’s dive into each.
✅ 1. Absolute Units
Absolute units have a fixed value, making them ideal when you need precise control — but they don’t respond to screen size changes.
| Unit | Description |
|---|---|
px | Pixels (most commonly used) |
pt | Points (1/72 of an inch) |
cm | Centimeters |
mm | Millimeters |
in | Inches |
Example:
.box {
width: 300px;
height: 150px;
}
When to use: For fixed-size elements in print styles or when precision matters more than responsiveness.
🌐 2. Relative Units
Relative units are dynamic — they scale based on context like parent size, font size, or the browser’s viewport.
🔸 % (Percentage)
- Based on the size of the parent element.
- Requires the parent to have an explicit height for
height: %to work.
.container {
width: 80%; /* 80% of the parent’s width */
height: 50%; /* 50% of the parent’s height */
}
🔸 em and rem
em: Relative to the font size of the parent.rem: Relative to the root (html) font size.
.box {
width: 20em;
height: 10rem;
}
Use case: For sizing elements in proportion to text (especially buttons or inputs).
🔸 vw, vh, vmin, vmax (Viewport Units)
| Unit | Based on |
|---|---|
vw | 1% of the viewport width |
vh | 1% of the viewport height |
vmin | 1% of the smaller of width/height |
vmax | 1% of the larger of width/height |
.hero {
height: 100vh; /* Full screen height */
width: 100vw; /* Full screen width */
}
Great for: Full-screen sections, responsive typography, and layouts that adapt to any screen size.
🔸 ch and ex
ch: Relative to the width of the “0” (zero) character.ex: Relative to the height of the lowercase “x”.
These are rarely used for height/width but can be useful for typographic precision.
🧠 Choosing the Right Unit
| Goal | Recommended Units |
|---|---|
| Fixed dimensions | px, pt |
| Responsive layouts | %, vw, vh, vmin |
| Typography-based sizing | em, rem |
| Full-screen sections | 100vh, 100vw |
| Print styles | cm, mm, in |
🔄 Bonus: Combining Units with calc()
CSS lets you combine units using the calc() function for more control.
.container {
width: calc(100% - 50px);
}
This mixes a percentage with pixels — perfect for layouts with fixed sidebars or padding.
✅ Summary
CSS offers a variety of units to set height and width, each with its own advantages. Understanding how and when to use them empowers you to create designs that are both precise and responsive.
Common units include:
- 📦
px,cm,in(absolute) - 🌐
%,em,rem,vw,vh(relative) - 🧩
calc()to mix and match units