learn2kode.in

Menu

CSS Tutorial

Menu

CSS Units (px, %, em, rem, vw, vh)

CSS uses different types of units to define sizes, spacing, fonts, and layouts. These units can be absolute (fixed) or relative (depending on the parent or viewport).

1. px — Pixels (Absolute Unit)

  • A fixed unit that does not scale with screen size.
  • Commonly used for borders, small spacing, and precise control.
  • Not recommended for responsive text.

Example

Copy Text 
.box { width: 200px; }

2. % — Percentage (Relative to Parent)

  • Size is calculated based on the parent element’s size.
  • Useful for fluid, responsive layouts.

Example

Copy Text 
.box { width: 50%; }

3. em — Relative to Parent Font Size

  • 1em = font size of the parent.
  • Stacks when nested (can become difficult to control).

Example

Copy Text 
.parent { font-size: 20px; }
.child { font-size: 2em; } /* 40px */

4. rem — Relative to Root Font Size (html element)

  • 1rem = font-size of the html element.
  • More predictable than em because it ignores nesting.

Example

Copy Text 
html { font-size: 16px; }
.box { padding: 2rem; } /* 32px */

5. vw — Viewport Width

  • 1vw = 1% of the browser window’s width.
  • Useful for responsive text and full-screen elements.

Example

Copy Text 
.hero { font-size: 5vw; }

6. vh — Viewport Height

  • 1vh = 1% of the viewport height.
  • Great for fullscreen sections.

Example

Copy Text 
.section { height: 100vh; }

HTML Table for CSS Units

Unit Type Description Example
px Absolute Fixed size, does not scale width: 100px;
% Relative Relative to parent size width: 50%;
em Relative Relative to parent font size font-size: 2em;
rem Relative Relative to root (html) font size padding: 1.5rem;
vw Relative 1% of viewport width font-size: 5vw;
vh Relative 1% of viewport height height: 100vh;
CSS Overflow