<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.
Formal syntax
<length-percentage> =
<length> |
<percentage>
Examples
length-percentage examples
The following simple example demonstrates several properties that use <length-percentage>
values.
HTML
html
<p>You can use percentages and lengths in so many places.</p>
CSS
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
Use in calc()
Specifications
Specification |
---|
CSS Values and Units Module Level 4 # mixed-percentages |
Browser compatibility
BCD tables only load in the browser