☰

📐 CSS Units - Complete Guide

📐 CSS Units

Pixels (px) Percentage (%) EM (em) REM (rem) Comparison
PX

Pixels - Absolute Units

🔹 Definition: Pixel (px) is an absolute unit of measurement. 1 pixel = 1/96th of an inch. Pixels are fixed and don't change based on parent elements or screen size.

📌 Use Case: Borders, small spacing, precise layouts that shouldn't scale

📝 Example 1: Fixed Width
Width: 300px (Fixed - Always 300px)
<div style="width: 300px;"> Width: 300px </div> CSS: .box { width: 300px; }
📝 Example 2: Font Size
Font: 14px
Font: 18px
Font: 24px
<p style="font-size: 14px;">Font: 14px</p> <p style="font-size: 18px;">Font: 18px</p> <p style="font-size: 24px;">Font: 24px</p> CSS: .small { font-size: 14px; } .medium { font-size: 18px; } .large { font-size: 24px; }
📝 Example 3: Border & Padding
Border: 2px | Padding: 20px
<div style="border: 2px solid white; padding: 20px;"> Border: 2px | Padding: 20px </div> CSS: .box { border: 2px solid white; padding: 20px; }

✅ Advantages

  • Predictable and consistent
  • Easy to use and understand
  • Perfect for precise designs
  • No inheritance issues

❌ Disadvantages

  • Not responsive
  • Accessibility issues
  • Users can't zoom properly
  • Not good for mobile devices
%

Percentage - Relative Units

🔹 Definition: Percentage (%) is a relative unit that's calculated based on the parent element's size. 100% means full width/height of parent container.

📌 Use Case: Responsive layouts, grid systems, flexible designs

📝 Example 1: Responsive Width
Width: 100% (Full Parent Width)
Width: 75%
Width: 50%
<div style="width: 100%;">Full Width</div> <div style="width: 75%;">75% Width</div> <div style="width: 50%;">50% Width</div> CSS: .full { width: 100%; } .three-quarter { width: 75%; } .half { width: 50%; }
📝 Example 2: Responsive Height
Height: 100%
Height: 100%
<div style="display: flex; height: 200px;"> <div style="flex: 1; height: 100%;"> Full Parent Height </div> </div> CSS: .container { height: 200px; display: flex; } .child { flex: 1; height: 100%; }
📝 Example 3: Typography with %
Font-size: 100% (20px)
Font-size: 150% (30px)
Font-size: 80% (16px)
<div style="font-size: 20px;"> <p style="font-size: 100%;">100% = 20px</p> <p style="font-size: 150%;">150% = 30px</p> </div> CSS: .parent { font-size: 20px; } .child { font-size: 150%; }

✅ Advantages

  • Responsive to parent size
  • Great for layouts
  • Mobile-friendly
  • Flexible design

❌ Disadvantages

  • Depends on parent
  • Can be confusing
  • Cascading issues
  • Hard to track exact size
EM

EM - Relative to Parent Font Size

🔹 Definition: EM (em) is a relative unit that's calculated based on the parent element's font size. 1em = parent's font size, 2em = 2x parent's font size.

📌 Use Case: Font sizing, responsive typography, scalable components

📝 Example 1: Font Sizes with EM
Font: 1em (16px = parent size)
Font: 1.5em (24px)
Font: 2em (32px)
Font: 0.8em (12.8px)
<div style="font-size: 16px;"> <p style="font-size: 1em;">1em = 16px</p> <p style="font-size: 1.5em;">1.5em = 24px</p> <p style="font-size: 2em;">2em = 32px</p> </div> CSS: .parent { font-size: 16px; } .parent p { font-size: 1.5em; }
📝 Example 2: Padding & Margin with EM
Padding: 1em (14px) | Margin: 0.5em (7px)
<div style="font-size: 16px;"> <p style="padding: 1em; margin: 0.5em;"> Padding: 1em Margin: 0.5em </p> </div> CSS: .box { font-size: 16px; padding: 1em; margin: 0.5em; }
📝 Example 3: Nested Elements (Cascading)
Parent: font-size = 1.5em = 24px
Child: font-size = 1.5em = 36px (1.5 × 24px)
<div style="font-size: 16px;"> <p style="font-size: 1.5em;"> Parent = 24px <span style="font-size: 1.5em;"> Child = 36px (Nested!) </span> </p> </div> ⚠️ Note: EM compounds in nested elements! Parent: 1.5em = 24px Child: 1.5em × 24px = 36px

✅ Advantages

  • Responsive scaling
  • Good for components
  • Inherits parent size
  • Maintains proportions

❌ Disadvantages

  • Compounding effect
  • Can be unpredictable
  • Hard to calculate
  • Nesting issues
REM

REM - Relative to Root Font Size

🔹 Definition: REM (rem) is a relative unit based on the root element's (html) font size, not the parent. This solves the cascading problem of EM. By default, root font size is 16px.

📌 Use Case: Recommended for responsive design, modern web development

📝 Example 1: Font Sizes with REM
Font: 1rem = 16px (root)
Font: 1.5rem = 24px
Font: 2rem = 32px
Font: 0.875rem = 14px
<!-- HTML --> <html> <!-- font-size: 16px (default) --> <p style="font-size: 1rem;">1rem = 16px</p> <p style="font-size: 1.5rem;">1.5rem = 24px</p> <p style="font-size: 2rem;">2rem = 32px</p> </html> CSS: html { font-size: 16px; } p { font-size: 1.5rem; }
📝 Example 2: No Cascading with REM
Parent: font-size = 1.5rem = 24px
Child: font-size = 1.5rem = 24px (Same as Parent!)
<div style="font-size: 20px;"> <p style="font-size: 1.5rem;"> Parent = 24px <span style="font-size: 1.5rem;"> Child = 24px (Same! No compounding) </span> </p> </div> ✅ Advantage: REM always refers to root (16px) No cascading problems!
📝 Example 3: Responsive REM (Recommended)
CSS Best Practice: html { font-size: 16px; /* Base: 1rem = 16px */ } h1 { font-size: 2rem; } /* 32px */ h2 { font-size: 1.5rem; } /* 24px */ p { font-size: 1rem; } /* 16px */ small { font-size: 0.875rem; } /* 14px */ padding: 1rem; /* 16px */ margin: 0.5rem; /* 8px */ /* Mobile Responsive */ @media (max-width: 768px) { html { font-size: 14px; /* All REM values scale down */ } /* Now 1rem = 14px, all sizes adjust automatically! */ }

✅ Advantages

  • No cascading issues
  • Easy to calculate
  • Responsive design
  • Industry standard

❌ Disadvantages

  • Older browser issues
  • Less component-based
  • Need to calculate
  • Not for all uses

📊 Comparison Table

Unit Type Value Best For Example
PX Absolute Fixed size Borders, icons width: 24px;
% Relative % of parent Responsive layouts width: 50%;
EM Relative × parent font Typography, spacing font-size: 1.5em;
REM Relative × root font Responsive design font-size: 1.5rem;