percentages in CSS

revision: May 9, 2026

content

What percentages do

Percentages in CSS are relative values. They depend on the parent element's corresponding property value.

width & height

        .container {
            width: 80%;     /* 80% of parent's width */
            height: 50%;    /* 50% of parent's height */
        }
    

font sizes

       .text {
            font-size: 150%;  /* 1.5x parent's font size */
        }
    

margins & padding

        .box {
            margin: 10%;     /* Relative to parent's WIDTH (not height) */
            padding: 5%;     /* Also relative to parent's width */
        }
    

positioning

        .absolute-box {
            position: absolute;
            left: 20%;      /* 20% of nearest positioned ancestor's width */
            top: 30%;       /* 30% of nearest positioned ancestor's height */
        }
    

transform

        .moved {
            transform: translateX(50%);  /* 50% of element's OWN width */
        }
    

Important rules

"width" property - relative to parent's width.

"height" property - relative to parent's height.

"margin/padding" property - relative to parent's width.

"top/bottom" property - relative to containing block's height.

"left/right" property - relative to containing block's width.

"font-size" property - relative to parent's font size.

"line-height" property - relative to current font-size.

"transform" property - relative to eement's own dimensions

Practical example

    .parent {
    width: 1000px;
    font-size: 16px;
    }

    .child {
    width: 50%;        /* = 500px */
    font-size: 200%;   /* = 32px */
    margin-left: 10%;  /* = 100px (parent's 1000px) */
    padding: 5%;       /* = 50px all sides (parent's 1000px) */
    }

Tips

For height percentages, the parent must have an explicit height.
Use "box-sizing: border-box" to make percentages more predictable.
In Flexbox/Grid, percentages work relative to the available space

When to use % in CSS?

Use the % unit in CSS when you want an element's size to be relative to its parent container or a defined containing block. It's particularly useful for responsive layouts.

Use % for fluid layouts that adapt to different screen sizes.

    /* Good: Sidebar takes 30% of parent width */
    .sidebar {
        width: 30%;
    }

/* Good: Hero section takes full viewport width via parent */
    .hero {
        width: 100%;  /* Relative to parent container */
    }

"% padding/margin" is always relative to the parent's width (not height).

    /* Creates a responsive square (padding based on parent width) */
    .square {
        width: 50%;
        padding-top: 50%;  /* 50% of parent's width */
    }

For "absolute" or "fixed" positioning, % relates to the nearest positioned ancestor.

    .modal {
        position: absolute;
        top: 20%;    /* 20% of positioned ancestor's height */
        left: 10%;   /* 10% of positioned ancestor's width */
    }

In "transform", % refers to the element's own dimensions.

    .center-me {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /* 50% of its own width/height */
    }

Quick decision guide

Layout widths → "%"" (often combined with "max-width")

Responsive padding/margins → "%"

Font sizes → "rem" or "em"

Fixed spacing/borders → "px"

Responsive typography scale → "rem" + media queries

Grid/flex child sizes → "%"" or "fr"/flex values

Best practice: use "%"" for container widths and layout structure, but combine with "max-width" to prevent overflow on large screens.