<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
- {{cssxref("<percentage>")}}
- {{cssxref("<length>")}}
- CSS Values and Units