<length-percentage>
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Der <length-percentage> CSS Datentyp repräsentiert einen Wert, der entweder eine <length> oder ein <percentage> sein kann.
Syntax
Siehe die Dokumentation für <length> und <percentage> für Details zu den einzelnen Syntaxen, die von diesem Typ erlaubt sind.
Formale Syntax
<length-percentage> =
<length> |
<percentage>
Beispiele
Beispiele für length-percentage
Dieses Beispiel zeigt mehrere Eigenschaften, die <length-percentage>-Werte verwenden.
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%;
}
Ergebnis
Verwendung in calc()
Wo ein <length-percentage> als zulässiger Typ angegeben ist, bedeutet dies, dass der Prozentwert auf eine Länge aufgelöst wird und daher in einem calc()-Ausdruck verwendet werden kann. Daher sind alle folgenden Werte für width akzeptabel:
css
width: 200px;
width: 20%;
width: calc(100% - 200px);
Spezifikationen
| Specification |
|---|
| CSS Values and Units Module Level 4 # mixed-percentages |