CSS Units

Back

Loading concept...

📏 CSS Units: The Magical Measuring Tape of the Web

The Story of the Size Kingdom

Imagine you’re building a magical house out of LEGO blocks. You need to know how big each piece should be. Should the door be tall enough for a giant? Should the window be as wide as your hand?

In the web world, CSS Units are like different kinds of measuring tapes. Each one measures things in a special way. Let’s meet them all!

🧱 Pixel (px) - The Tiny Building Block

What is a Pixel?

Think of pixels like LEGO studs—tiny dots that make up your screen. When you say something is 20px wide, you’re saying “make this 20 tiny dots wide.”

Pixels are FIXED. They never change size. 20 pixels is always 20 pixels, no matter what.

Example: The Stubborn Box

.my-box {
  width: 200px;
  height: 100px;
  font-size: 16px;
}

This box is always 200 dots wide and 100 dots tall. It doesn’t care if you’re on a tiny phone or a giant TV—it stays the same size!

When to Use Pixels?

✅ Good for: Borders, shadows, small icons, things that should NEVER change size

⚠️ Be careful: Using pixels for text can make it hard to read on different devices

📐 em - The Copy-Cat Unit

What is em?

Imagine you have a rubber band. Its size depends on what it’s attached to. That’s em!

1em means “the same size as my parent’s font.” If your parent has a font-size of 16px, then 1em = 16px.

The Magic Multiplier

.parent {
  font-size: 20px;
}

.child {
  font-size: 1.5em;  /* = 30px (20 × 1.5) */
  padding: 2em;      /* = 60px (30 × 2) */
}

Wait! See something tricky? Inside .child, padding uses the child’s own font-size (30px), not the parent’s!

The em Chain Reaction

.grandparent { font-size: 16px; }
.parent { font-size: 2em; }  /* = 32px */
.child { font-size: 2em; }   /* = 64px! */

Each level compounds on the previous one. This can get confusing fast! That’s why we have rem…

🌳 rem - The Root Ruler

What is rem?

rem stands for Root em. It’s like having ONE measuring tape for your whole house, kept at the front door.

1rem always equals the font-size of your <html> element. No matter how deep you go, 1rem stays the same!

The Consistent Choice

html {
  font-size: 16px;  /* The ONE source of truth */
}

.anywhere-in-page {
  font-size: 1.5rem;   /* Always 24px */
  margin: 2rem;        /* Always 32px */
  padding: 0.5rem;     /* Always 8px */
}

rem vs em - Quick Compare

Unit Looks at… Best for…
em Parent element Component-specific scaling
rem Root (<html>) Consistent, predictable sizing 
graph TD
    A["html: 16px"] -->|1rem = 16px| B["body"]
    B -->|1rem = 16px| C["div"]
    C -->|1rem = 16px| D["p"]
    D -->|1rem = 16px| E["span"]
    style A fill:#4CAF50,color:#fff

📊 Percentage (%) - The Fair Sharer

What is Percentage?

Percentages are like slicing a pizza. “I want 50% of the pizza” means half of whatever pizza you have.

In CSS, % means a portion of the parent’s size.

Example: The Growing Child

.parent {
  width: 400px;
}

.child {
  width: 50%;      /* = 200px */
  height: 25%;     /* 25% of parent's HEIGHT */
  font-size: 120%; /* 120% of parent's font */
}

The Tricky Part

⚠️ Height percentages only work if the parent has a defined height! Otherwise, it’s like asking for 50% of “nothing.”

/* This WON'T work as expected */
.parent {
  /* no height set! */
}
.child {
  height: 50%; /* 50% of what?? */
}

/* This WORKS */
.parent {
  height: 300px;
}
.child {
  height: 50%; /* = 150px ✓ */
}

📺 Viewport Units - The Screen Watchers

What are Viewport Units?

The viewport is your screen—the visible area where your website appears. Viewport units measure things based on how big the screen is.

The Four Friends

Unit Means Example (1920×1080 screen)
vw 1% of viewport width 100vw = 1920px
vh 1% of viewport height 100vh = 1080px
vmin 1% of the smaller side 100vmin = 1080px
vmax 1% of the larger side 100vmax = 1920px

Example: Full-Screen Hero

.hero-section {
  width: 100vw;    /* Full screen width */
  height: 100vh;   /* Full screen height */
}

.square-box {
  width: 50vmin;   /* Always a square! */
  height: 50vmin;  /* Uses smaller side */
}

Why vmin and vmax?

Imagine you’re on a phone:

  • Portrait mode: Width is smaller → vmin uses width
  • Landscape mode: Height is smaller → vmin uses height

vmin makes sure things don’t get too big on any screen orientation!

graph TD
    A["Screen 1920×1080"] --> B["vw: Based on 1920"]
    A --> C["vh: Based on 1080"]
    A --> D["vmin: Based on 1080"]
    A --> E["vmax: Based on 1920"]
    style D fill:#2196F3,color:#fff
    style E fill:#FF9800,color:#fff

🔄 Dynamic Viewport Units - The Smart Adapters

The Problem with Mobile Browsers

On phones, the browser has a toolbar that appears and disappears. When you use regular vh, weird things happen:

  • Toolbar visible → screen is smaller
  • Toolbar hidden → screen is bigger
  • Your layout jumps around! 😱

The New Heroes

Unit What it measures
svh / svw Small viewport (toolbar visible)
lvh / lvw Large viewport (toolbar hidden)
dvh / dvw Dynamic (changes with toolbar!)

Example: Stable Full-Screen

/* Old way - can cause jumps */
.hero {
  height: 100vh;
}

/* New way - smooth! */
.hero {
  height: 100dvh;  /* Adjusts automatically */
}

/* Safe way - always fits */
.hero {
  height: 100svh;  /* Uses smallest possible */
}

When to Use Each?

Situation Use This
Elements that should fill screen smoothly dvh / dvw
Fixed backgrounds, hero images svh / svw
Safe fallback when in doubt svh / svw 
graph TD
    A["Mobile Screen"] --> B["Toolbar Visible"]
    A --> C["Toolbar Hidden"]
    B --> D["svh = Small Height"]
    C --> E["lvh = Large Height"]
    D --> F["dvh: Transitions between both"]
    E --> F
    style F fill:#9C27B0,color:#fff

🎯 Quick Reference: Choosing the Right Unit

graph TD
    A["What are you sizing?"] --> B{Fixed size needed?}
    B -->|Yes| C["Use px"]
    B -->|No| D{Relative to parent?}
    D -->|Yes| E{Font-based scaling?}
    E -->|Yes| F["Use em"]
    E -->|No| G["Use %"]
    D -->|No| H{Relative to screen?}
    H -->|Yes| I{Mobile browser bars matter?}
    I -->|Yes| J["Use dvh/svh"]
    I -->|No| K["Use vh/vw"]
    H -->|No| L["Use rem"]
    style C fill:#FF5722,color:#fff
    style F fill:#4CAF50,color:#fff
    style G fill:#2196F3,color:#fff
    style J fill:#9C27B0,color:#fff
    style K fill:#FF9800,color:#fff
    style L fill:#00BCD4,color:#fff

🏆 The Golden Rules

  1. Use rem for typography - Consistent, accessible, predictable
  2. Use px for tiny details - Borders, shadows, 1-2px adjustments
  3. Use % for flexible layouts - Containers that should share space
  4. Use vh/vw for full-screen magic - Hero sections, modals
  5. Use dvh/svh on mobile - Avoid toolbar jumping issues
  6. Use em for component scaling - When parts should grow together

🎉 You Did It!

You now understand the six types of CSS units:

  • px - The tiny fixed dot
  • em - The parent follower
  • rem - The root ruler
  • % - The fair sharer
  • vh/vw - The screen watchers
  • dvh/svh - The smart adapters

Each unit has its superpower. Mix and match them to build websites that look amazing on every screen!

Remember: There’s no single “best” unit. The best unit is the one that makes sense for what you’re building. Now go create something awesome! 🚀

Loading story...

Story - Premium Content

Please sign in to view this story and start learning.

Upgrade to Premium to unlock full access to all stories.

Sign In to Access Get Premium Access Close

Stay Tuned!

Story is coming soon.

Story Preview

Story - Premium Content

Please sign in to view this concept and start learning.

Upgrade to Premium to unlock full access to all content.

Sign In to Access Get Premium Access Close