width

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.

* Some parts of this feature may have varying levels of support.

Die width-Eigenschaft (CSS) legt die Breite eines Elements fest. Standardmäßig definiert sie die Breite des Inhaltsbereichs. Wenn jedoch box-sizing auf border-box gesetzt ist, wird die Breite des Rahmenbereichs festgelegt.

Probieren Sie es aus

Der angegebene Wert von width bezieht sich auf den Inhaltsbereich, solange der Wert innerhalb der durch min-width und max-width definierten Werte bleibt.

Wenn der Wert von width kleiner als der Wert von min-width ist, überschreibt min-width den Wert von width.
Wenn der Wert von width größer als der Wert von max-width ist, überschreibt max-width den Wert von width.

Hinweis: Als geometrische Eigenschaft gilt width auch für die SVG-Elemente <svg>, <rect>, <image> und <foreignObject>, wobei auto für <svg> auf 100% und für andere Elemente auf 0 auflöst, und Prozentwerte sich auf die Breite des SVG-Viewport für <rect> beziehen. Der CSS-Wert der Eigenschaft width überschreibt jeden Wert des SVG-Attributs width, der im SVG-Element gesetzt wurde.

Syntax

css

/* <length> values */
width: 300px;
width: 25em;
width: anchor-size(--myAnchor inline, 120%);
width: minmax(100px, anchor-size(width));

/* <percentage> value */
width: 75%;

/* Keyword values */
width: max-content;
width: min-content;
width: fit-content;
width: fit-content(20em);
width: auto;
width: stretch;

/* Global values */
width: inherit;
width: initial;
width: revert;
width: revert-layer;
width: unset;

Werte

<length>: Definiert die Breite als eine Distanzangabe.
<percentage>: Definiert die Breite als Prozentsatz der Breite des enthältenden Blocks.
auto: Der Browser berechnet und wählt eine Breite für das angegebene Element.
max-content: Die intrinsische bevorzugte Breite.
min-content: Die intrinsische Mindestbreite.
fit-content: Nutzt den verfügbaren Platz, jedoch nicht mehr als max-content, d.h. min(max-content, max(min-content, stretch)).
fit-content(<length-percentage>): Verwendet die fit-content-Formel mit dem verfügbaren Platz, ersetzt durch das angegebene Argument, d.h. min(max-content, max(min-content, <length-percentage>)).
stretch: Setzt die Breite der Außenabstand-Box des Elements auf die Breite des enthältenden Blocks. Es versucht, die Außenabstand-Box so zu erweitern, dass sie den verfügbaren Platz im enthältenden Block ausfüllt, verhält sich also in gewisser Weise ähnlich wie 100%, wendet jedoch die resultierende Größe auf die Außenabstand-Box statt auf die durch box-sizing bestimmte Box an.

Hinweis: Um die von Browsern verwendeten Aliase für den Wert stretch und dessen Implementierungsstatus zu überprüfen, siehe den Abschnitt Browser-Kompatibilität.

Barrierefreiheit

Stellen Sie sicher, dass Elemente mit einer festgelegten width weder abgeschnitten sind noch andere Inhalte verdecken, wenn die Seite vergrößert wird, um die Textgröße zu erhöhen.

Formale Definition

Anfangswert	`auto`
Anwendbar auf	alle Elemente außer nicht ersetzte Inlineelemente, Tabellenzeilen und Zeilengruppen
Vererbt	Nein
Prozentwerte	bezieht sich auf die Breite des äußeren Elements
Berechneter Wert	ein Prozentwert oder `auto` oder die absolute Länge
Animationstyp	Längenangabe, Prozentsatz oder `calc()`;

Formale Syntax

width = 
  auto                                      |
  <length-percentage [0,∞]>                 |
  min-content                               |
  max-content                               |
  fit-content( <length-percentage [0,∞]> )  |
  <calc-size()>                             |
  <anchor-size()>                           

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

<calc-size()> = 
  calc-size( <calc-size-basis> , <calc-sum> )  

<anchor-size()> = 
  anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )  

<calc-size-basis> = 
  <intrinsic-size-keyword>  |
  <calc-size()>             |
  any                       |
  <calc-sum>                

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*  

<anchor-name> = 
  <dashed-ident>  

<anchor-size> = 
  width        |
  height       |
  block        |
  inline       |
  self-block   |
  self-inline  

<calc-product> = 
  <calc-value> [ [ '*' | '/' ] <calc-value> ]*  

<calc-value> = 
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )  

<calc-keyword> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN

Beispiele

Standardbreite

css

p.goldie {
  background: gold;
}

html

<p class="goldie">The MDN community writes really great documentation.</p>

Beispiel mit Pixeln und Ems

css

.px_length {
  width: 200px;
  background-color: red;
  color: white;
  border: 1px solid black;
}

.em_length {
  width: 20em;
  background-color: white;
  color: red;
  border: 1px solid black;
}

html

<div class="px_length">Width measured in px</div>
<div class="em_length">Width measured in em</div>

Beispiel mit Prozentwerten

css

.percent {
  width: 20%;
  background-color: silver;
  border: 1px solid red;
}

html

<div class="percent">Width in percentage</div>

Beispiel mit "max-content"

css

p.max-green {
  background: lightgreen;
  width: max-content;
}

html

<p class="max-green">The MDN community writes really great documentation.</p>

Beispiel mit "min-content"

css

p.min-blue {
  background: lightblue;
  width: min-content;
}

html

<p class="min-blue">The MDN community writes really great documentation.</p>

Spezifikationen

Specification
CSS Box Sizing Module Level 4 # width-height-keywords
CSS Box Sizing Module Level 4 # sizing-values

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

height
box-sizing
min-width, max-width
block-size, inline-size
anchor-size()
SVG-Attribut width
Einführung in das grundlegende Box-Modell von CSS
CSS-Box-Modell-Modul