CSS <percentage> Data Type

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The <percentage> CSS data type represents a value relative to another value, typically expressed as a fraction of 100. Percentages are most often used to define dimensions, spacing, or positioning in relation to a parent container or another reference point, allowing for flexible and responsive layouts. Unlike absolute units like <length>, percentages adapt dynamically when the size of the reference element changes, making them highly useful in modern, fluid web design.

For example, when setting the width of a block element, a percentage defines the width as a proportion of its parent element:

.container {
    width: 80%; /* 80% of the parent element's width */
}

Percentages are also frequently used in conjunction with properties such as top, left, margin, and padding. In these contexts, the percentage value is calculated relative to the dimensions of the containing element. For instance, vertical margins as a percentage are relative to the width of the containing block, which can sometimes produce unexpected results:

.box {
    margin-top: 10%; /* 10% of the containing element's width */
    padding-left: 5%; /* 5% of the containing element's width */
}

<percentage> values are also used in properties like transform for scaling or translations, and in clip-path for defining regions of elements. Because percentages are relative, they allow designs to remain proportional and responsive across different screen sizes, making them a core tool in flexible layouts and modern CSS design patterns.

.progress {
    width: 50%; /* progress bar fills 50% of parent width */
    height: 20px;
    background-color: blue;
}

This flexible behavior makes <percentage> one of the most versatile CSS data types for responsive and adaptive design.

Syntax

property: <percentage>

Values

<percentage>Consists of a <number> followed by the percentage sign (%). Optionally, it may be preceded by a single + or - sign, although negative values are not valid for all properties.

Example

HTML

<div class='container'>

    <h1>CSS percentage examples</h1>



    <section class='example box-width'>

        <h2>Width relative to parent</h2>

        <div class='parent'>

            <div class='child'>child width: 60%</div>

        </div>

    </section>



    <section class='example padding-percent'>

        <h2>Padding uses percentage of parent width</h2>

        <div class='pad-parent'>

            <div class='padded'>padding: 5%</div>

        </div>

    </section>



    <section class='example abs-percent'>

        <h2>Position percentages (top/left relative to containing block)</h2>

        <div class='abs-parent'>

            <div class='abs-child'>top: 20% • left: 10%</div>

        </div>

    </section>



    <section class='example font-percent'>

        <h2>Font-size percentage</h2>

        <p class='text-150'>font-size: 150% (relative to inherited font size)</p>

    </section>

</div>

CSS

:root {
    --bg: #f7f9fc;
    --card: #ffffff;
    --accent: #2b7fed;
    --muted: #6b7280;
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    background: var(--bg);
    padding: 32px;
    color: #111827;
}

.container {
    max-width: 920px;
    margin: 0 auto;
}

h1 {
    font-size: 24px;
    margin-bottom: 20px;
}

.example {
    background: var(--card);
    border: 1px solid #e6e9ee;
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.example h2 {
    font-size: 16px;
    margin: 0 0 12px 0;
    color: var(--muted);
}

.parent {
    width: 80%; /* percentage of the container */
    background: #eef6ff;
    padding: 12px;
    border-radius: 6px;
}

.child {
    width: 60%; /* percentage of .parent's width */
    background: var(--accent);
    color: #ffffff;
    padding: 10px;
    border-radius: 4px;
}

.pad-parent {
    width: 80%;
    background: #fff7ed;
    border-radius: 6px;
}

.padded {
    background: #ffb547;
    padding: 5%; /* percentage is relative to the parent element's width */
    color: #3b2b00;
    border-radius: 4px;
}

.abs-parent {
    width: 100%;
    height: 160px;
    background: #f0fdf4;
    position: relative; /* containing block for absolutely positioned child */
    border-radius: 6px;
}

.abs-child {
    position: absolute;
    top: 20%;   /* percentage of .abs-parent's height */
    left: 10%;  /* percentage of .abs-parent's width */
    width: 50%; /* percentage of .abs-parent's width */
    background: #10b981;
    color: #ffffff;
    padding: 8px;
    border-radius: 4px;
}

.text-150 {
    font-size: 150%; /* percentage relative to the inherited font size */
    margin: 0;
    color: #374151;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS percentage data type. Hover over a browser icon to see the version that first introduced support for this CSS data type.