<p>You can use percentages and lengths in so many places.</p> 

<length-percentage>

The <length-percentage> CSS data type represents a value that can be either a <length> or a <percentage>.

Syntax

Refer to the documentation for <length> and <percentage> for details of the individual syntaxes allowed by this type.

Examples

length-percentage examples

The following simple example demonstrates several properties that use <length-percentage> values.

<p>You can use percentages and lengths in so many places.</p> 

p {   /* length-percentage examples */   width: 75%;   height: 200px;   margin: 3rem;   padding: 1%;   border-radius: 10px 10%;   font-size: 250%;   line-height: 1.5em;    /* length examples */   text-shadow: 1px 1px 1px red;   border: 5px solid red;   letter-spacing: 3px;    /* percentage example */   text-size-adjust: 20%; } 

Use in calc()

Where a <length-percentage> is specified as an allowable type, this means that the percentage resolves to a length and therefore can be used in a calc() expression. Therefore, all of the following values are acceptable for width:

width: 200px; width: 20%; width: calc(100% - 200px); 

Specifications

See also

Last modified: Nov 21, 2021, by MDN contributors