What Units Can Be Used for Height and Width in CSS?

When designing layouts in CSS, controlling the height and width of elements is fundamental. But with so many different units available, choosing the right one can be tricky.

In this post, you’ll learn about all the available CSS units for setting height and width—how they work, when to use them, and best practices for responsive design.

---

📏 Categories of CSS Units

CSS supports two major types of units:

1. Absolute units – Fixed size
2. Relative units – Flexible, based on context

---

✅ Absolute Units

These units do not scale based on the device or browser. They are best used when you need precise control over dimensions.

Unit	Description	Example
px	Pixels	width: 200px
cm	Centimeters	width: 5cm
mm	Millimeters	height: 30mm
in	Inches	width: 2in
pt	Points (1 pt = 1/72 in)	width: 12pt
pc	Picas (1 pc = 12 pt)	height: 1pc

✅ Recommended: Use px for most absolute sizing needs in web development.

---

✅ Relative Units

Relative units adjust based on other elements, viewport size, or font size, making them ideal for responsive design.

🔹 Percentage (%)

• Relative to the parent element’s size.

width: 50%;  /* 50% of the parent width */

🔹 Viewport Units (vw, vh, vmin, vmax)

• Based on the browser window (viewport).

Unit	Description
vw	1% of the viewport width
vh	1% of the viewport height
vmin	1% of the smaller dimension
vmax	1% of the larger dimension

width: 100vw;  /* Full screen width */
height: 100vh; /* Full screen height */

🔹 Font-relative Units (em, rem)

• Based on font size.

Unit	Relative To
em	Current element’s font size
rem	Root element’s font size (html)

width: 10em;   /* 10 times the font size */
width: 20rem;  /* 20 times the root font size */

💡 rem is commonly used for scalable layouts.

---

🧪 CSS Unit Usage Example

.box {
  width: 80%;
  height: 60vh;
  padding: 2rem;
  border: 2px solid #333;
}

This creates a box that:

• Takes 80% of its parent’s width
• 60% of the viewport’s height
• Padding scales with root font size

---

🚫 Units You Can’t Use for Width/Height

Some CSS units are not applicable to width or height, such as:

• fr (used in Grid layout, not for element sizing directly)
• ch (can be used, but more appropriate for inline content width)
• ex (based on x-height, not commonly used for sizing blocks)

---

✅ Summary Table

Unit	Type	Scales With	Use Case
px	Absolute	Fixed size	Precise element control
%	Relative	Parent element	Responsive containers
vw/vh	Relative	Viewport size	Full-screen sections, media queries
em/rem	Relative	Font size	Scalable layouts and typography
cm/in	Absolute	Physical dimensions	Print styles

---

🚀 Final Thoughts

Choosing the right unit for height and width depends on your layout goals:

• Use % for parent-relative sizing.
• Use vh/vw for full-screen layouts.
• Use rem/em for scalable, accessible designs.
• Use px for precise and controlled layouts.

🔧 Pro Tip: Combine units strategically (e.g., min-height: 60vh; padding: 2rem) to build responsive and readable interfaces.

---