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.

Die width CSS-Eigenschaft legt die Breite eines Elements fest. Standardmäßig bestimmt sie die Breite des Inhaltsbereichs, aber wenn box-sizing auf border-box gesetzt ist, legt sie die Breite des Rahmenbereichs fest.

Probieren Sie es aus

Der angegebene Wert der width gilt für den Inhaltsbereich, solange der Wert innerhalb der durch min-width und max-width definierten Werte bleibt.

Wenn der Wert für width kleiner ist als der Wert von min-width, dann überschreibt min-width die width.
Wenn der Wert für width größer ist als der Wert von max-width, dann überschreibt max-width die width.

Hinweis: Als geometrische Eigenschaft gilt width auch für die <svg>, <rect>, <image> und <foreignObject> SVG-Elemente, wobei auto für <svg> zu 100% und für andere Elemente zu 0 aufgelöst wird, und Prozentwerte relativ zur Breite des SVG-Viewports für <rect> sind. Der CSS-width-Eigenschaftswert überschreibt jeden SVG-width-Attributwert, der auf dem SVG-Element gesetzt ist.

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 Entfernungswert.
<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: Verwendet den verfügbaren Raum, aber 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 Raum, der durch das angegebene Argument ersetzt wird, d.h. min(max-content, max(min-content, <length-percentage>)).
stretch: Setzt die Breite des Randbereichs des Elements auf die Breite des enthältenden Blocks. Es wird versucht, den Randbereich so zu gestalten, dass er den verfügbaren Raum im enthältenden Block füllt, verhält sich also in gewisser Weise ähnlich wie 100%, wendet die resultierende Größe jedoch auf den Randbereich an, anstatt auf den durch box-sizing bestimmten Bereich.

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

Barrierefreiheit

Stellen Sie sicher, dass Elemente mit einer width-Einstellung nicht abgeschnitten werden und/oder keinen anderen Inhalt 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 Prozent

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