Skip to main content

<length-percentage>

The <length-percentage> CSS data type represents a value that can be either a {{Cssxref("length")}} or a {{Cssxref("percentage")}}.

Syntax

Refer to the documentation for {{Cssxref("length")}} and {{Cssxref("percentage")}} for details of the individual syntaxes allowed by this type.

Formal syntax

Examples

length-percentage examples

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

HTML

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

CSS

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%;
}

Result

{{EmbedLiveSample('length-percentage_examples', '100%', 320)}}

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 {{cssxref("calc", "calc()")}} expression. Therefore, all of the following values are acceptable for {{cssxref("width")}}:

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

Specifications

Browser compatibility

See also