<length-percentage>

Verweisen Sie auf die Dokumentation für <length> und <percentage>, um Details zu den einzelnen erlaubten Syntaxen dieses Typs zu erhalten.

<length-percentage> = 
  <length>      |
  <percentage>  

Das folgende einfache Beispiel demonstriert mehrere Eigenschaften, die <length-percentage>-Werte verwenden.

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

Ergebnis

Wo ein <length-percentage> als zulässiger Typ angegeben wird, bedeutet dies, dass der Prozentsatz in eine Länge aufgelöst wird und daher in einem calc()-Ausdruck verwendet werden kann. Daher sind alle folgenden Werte für width akzeptabel:

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

• <percentage>
• <length>
• CSS Values and Units