CSS Units - Complete Guide

CSS units determine how we size elements on a webpage. Understanding the difference between unit types is essential for creating responsive, scalable designs.

There are two main categories of CSS units:

Absolute units — fixed sizes that don't change
Relative units — sizes that adapt based on context

Absolute Units

Absolute units have fixed sizes. They don't change based on screen size, browser settings, or parent containers.

px (Pixel)

A pixel is the smallest visible unit on a digital screen. Use pixels when you need exact, predictable sizing.

<html>
<head>
    <style>
        p {
            font-size: 40px;
            color: green;
        }
    </style>
</head>
<body>
    <p>Hello GFG How are you?</p>
</body>
</html>

The font-size is fixed at 40 pixels — it does not scale with the viewport or parent element.

When to use pixels:

Icons and borders
Precise layouts where exact measurements matter
Static UI elements that shouldn't change size

Relative Units

Relative units scale dynamically based on their context. They're the foundation of responsive design.

em (Relative to Parent Font Size)

The em unit scales based on the font-size of the parent element.

<html>
<head>
    <style>
        .ok {
            font-size: 20px;
        }
        .para {
            font-size: 2em;
        }
    </style>
</head>
<body>
    <div class="ok">
        Hello GFG
        <div class="para">Hello GFG</div>
    </div>
</body>
</html>

In this example:

Parent has font-size: 20px
Child uses 2em
Result: 2 × 20px = 40px

The em unit is useful for creating scalable components where child elements should grow proportionally with their parent.

rem (Relative to Root Font Size)

The rem unit scales based on the root html element's font-size, ignoring all parent elements.

<html>
<head>
    <style>
        html {
            font-size: 25px;
        }
        .para {
            font-size: 2rem;
            color: red;
        }
    </style>
</head>
<body>
    <div class="para">Hello GFG</div>
</body>
</html>

In this example:

Root element (html) has font-size: 25px
The paragraph uses 2rem
Result: 2 × 25px = 50px

Unlike em, rem always references the root element, making it more predictable for consistent typography across your entire site.

vw (Viewport Width)

The vw unit is relative to the width of the viewport. 1vw equals 1% of the viewport width.

<html>
<head>
    <style>
        .para {
            height: 10vw;
            width: 50vw;
            border: 2px solid black;
            background-color: chocolate;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div class="para">Hello GFG</div>
</body>
</html>

In this example:

width: 50vw — the element is 50% of the viewport width
height: 10vw — the element is 10% of the viewport width

The vw unit is perfect for creating elements that scale proportionally with screen width.

vh (Viewport Height)

The vh unit is relative to the height of the viewport. 1vh equals 1% of the viewport height.

<html>
<head>
    <style>
        .full-height {
            height: 100vh;
            background-color: lightblue;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <div class="full-height">
        <h1>This div is 100% of the viewport height (100vh)</h1>
    </div>
</body>
</html>

Using 100vh makes the element fill the entire height of the browser window. This is commonly used for hero sections and full-screen landing pages.

% (Percentage)

The percentage unit is relative to the parent element's dimensions.

<html>
<head>
    <style>
        .container {
            width: 200px;
            height: 100px;
            background-color: lightgreen;
        }
        .child {
            width: 50%;
            height: 50%;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="child"></div>
    </div>
</body>
</html>

The child element takes 50% of its parent's width and height. Percentages are ideal for creating flexible, proportional layouts.

When to Use Which Unit

Use Absolute Units (px) When:

You need precise, pixel-perfect measurements
Working with icons, borders, or shadows
Creating static layouts that don't need to scale
UI consistency is more important than responsiveness

Use Relative Units When:

Designing responsive layouts
Scaling typography across different screen sizes
Creating fluid layouts that adapt to their containers
Building accessible designs that respect user preferences

Quick Reference

Unit	Relative To	Best Use Case
px	Nothing (fixed)	Icons, borders, fixed elements
em	Parent font-size	Scalable components
rem	Root font-size	Consistent typography
%	Parent dimensions	Flexible layouts
vw	Viewport width	Responsive widths
vh	Viewport height	Full-screen sections

CSS Units - Complete Guide

CSS Units - Complete Guide

Absolute Units

px (Pixel)

Relative Units

em (Relative to Parent Font Size)

rem (Relative to Root Font Size)

vw (Viewport Width)

vh (Viewport Height)

% (Percentage)

When to Use Which Unit

Use Absolute Units (px) When:

Use Relative Units When:

Quick Reference

CSS Positioning Basics

Complete Guide to CSS Grid