CSS Units & Measurement

Introduction

CSS units define how big or small things appear on the screen. Fonts, spacing, layouts, margins, padding, widths, heights—everything depends on units. Choosing the wrong unit can break responsiveness, cause accessibility issues, or make layouts behave unpredictably.

Many beginners overuse px and later struggle when designs do not scale properly on different devices. In this chapter, you will clearly understand:

• All major CSS units
• When to use which unit
• Differences between absolute and relative units
• Practical, real-world usage patterns
• Common mistakes and best practices

This chapter is essential for responsive and professional CSS.

What Are CSS Units?

CSS units specify measurement values used in properties like width, height, font-size, margin, padding, etc.

p {
  font-size: 16px;
}

Here, px is the unit.

Types of CSS Units

CSS units are broadly divided into:

1. Absolute units
2. Relative units
3. Viewport units

Let’s understand each in detail.

1. Absolute Units

Absolute units have fixed sizes. They do not change based on screen size or parent element.

Pixel (px) – Most Common

h1 {
  font-size: 32px;
}

When to use px: Borders, Icons, Shadows, Small fixed elements.

Avoid using px everywhere for font sizes as it is not scalable.

2. Relative Units (Very Important)

Relative units change based on parent element, root element, font size, or container size. These are essential for responsive design.

Percentage (%)

Percentages are relative to the parent element.

.container {
  width: 80%;
}

Common use cases: Layout widths, Images, Responsive containers.

em Unit

em is relative to the font size of the parent element.

.container { font-size: 20px; }
p { font-size: 1.2em; }
/* 1.2em = 24px */

Problem with em: Nesting multiplies sizes, which can become confusing.

rem Unit (Recommended)

rem is relative to the root element (html) font size.

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

Benefits: Predictable, Easy scaling, Great for accessibility.

ch Unit

Represents the width of the “0” character. Useful for input fields and text layouts.

3. Viewport Units (Very Powerful)

Viewport units are based on screen size.

vw (Viewport Width)

.hero {
  width: 100vw;
}

Used for: Full-width sections, Hero banners.

vh (Viewport Height)

.hero {
  height: 100vh;
}

Creates full-screen sections.

Modern Functions & Combining Units

calc()

The calc() function allows mixing units.

.container {
  width: calc(100% - 40px);
}

clamp() (Modern CSS)

clamp() sets a minimum, preferred (scalable), and maximum size.

h1 {
  font-size: clamp(24px, 4vw, 40px);
}

Perfect for responsive typography.

Choosing the Right Unit (Cheat Sheet)

• Fonts: Use rem
• Layout widths: Use %, vw, max-width
• Spacing: Use rem or em
• Borders: Use px

Real-World Example: Responsive Card

.card {
  width: 90%;
  max-width: 400px;
  padding: 1.5rem;
  margin: 1rem auto;
}

This works well on Mobile, Tablet, and Desktop.

Common Beginner Mistakes & Best Practices