<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 July 2015.

Der <length-percentage> CSS Datentyp repräsentiert einen Wert, der entweder eine <length> oder ein <percentage> sein kann.

Syntax

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

Formale Syntax

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

Beispiele

Beispiele für length-percentage

Das folgende einfache Beispiel demonstriert 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 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:

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

Spezifikationen

Specification
CSS Values and Units Module Level 4
# mixed-percentages

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch