CSS Units Demo

Pixel (px)

Example:

This box is 200px wide and 100px tall.

Root em (rem)

Example:

This box is 10rem wide and 5rem tall, relative to the root font size.

Em (em)

Example:

This text is styled using em units.

The size of this text and padding scales relative to its parent font size.

Viewport Height (vh) and Width (vw)

Example:

This box is 50% of the viewport width and 20% of the viewport height.

Percentage (%)

Example:

This box is 50% of its parent's width and has a fixed height of 50px.

Comparison Table

Unit Advantages Disadvantages Best Use Cases
px Exact control, not affected by parent elements. Not responsive or scalable. Static elements like borders or icons.
rem Scalable, consistent across the page. Depends on the root font size. Font sizes, spacing, responsive design.
em Scales relative to parent font size. Can become unpredictable with nested elements. Element-specific scaling like buttons.
vh / vw Responsive to viewport size. Not ideal for fixed-size layouts. Full-page layouts, hero sections.
% Flexible, adjusts to parent size. Depends on parent dimensions. Fluid layouts, relative sizing.