CSS <percentage> Data Type

Description

The CSS <percentage> data type represents a percentage value. It is often used to define a size as relative to an element's parent object. Numerous properties can use percentages, such as width, height, margin, padding, and font-size.

To write a percentage value in CSS, simply follow a number with the percent sign (%). For example, 50% represents half of the value that the percentage is relative to.

Percentage values are calculated based on the formatting context of the element they are applied to. The formatting context is the rectangular area that contains an element and all of its descendants. The most common formatting context is the containing block, which is the element that contains the element to which the percentage value is applied.

For example, the following CSS code will set the width of the div element to 50% of the width of its containing block:

div {
  width: 50%;
}

If the containing block is 1000 pixels wide, then the div element will be 500 pixels wide.

Percentage values can also be used to define the size of elements relative to other elements. For example, the following CSS code will set the height of the p element to 75% of the height of the div element:

div {
  height: 100px;
}

p {
  height: 75%;
}

In this case, the p element will be 75 pixels high, regardless of the width of the div element.

Percentage values are a powerful tool for creating responsive and flexible layouts. By using percentages instead of absolute values, you can ensure that your website will look good on all devices, regardless of screen size.

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

<p class="box">Example of the percentage CSS data type.</p>

CSS

.box {
    border: 2px solid purple;
    width: 75%;
    height: 100px;
    border-radius: 10%;
    font-size: 120%;
    padding: 20px;
}

Result

Browser Support

The following table will show you the current browser support for the CSS percentage data type.

Desktop

12	1	1	3.5	1

Tablets / Mobile

18	4	10.1	1	1	37

Last updated by CSSPortal on: 7th October 2023

Support Us