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-Eigenschaft von CSS legt die Breite eines Elements fest. Standardmäßig definiert sie die Breite des Inhaltsbereichs, aber wenn box-sizing auf border-box gesetzt ist, definiert sie die Breite des Randbereichs.

Probieren Sie es aus

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

Wenn der Wert für width kleiner ist als der Wert für min-width, dann überschreibt min-width die width.
Wenn der Wert für width größer ist als der Wert für 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> auf 100% und für andere Elemente auf 0 aufgelöst wird und Prozentwerte relativ zur SVG-Ansichtsfensterbreite für <rect> sind. Der CSS width-Eigenschaftswert überschreibt jeden SVG-width-Attributwert, der auf dem SVG-Element festgelegt 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 umgebenden 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 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 der Randbox des Elements auf die Breite seines umgebenden Blocks. Es versucht, die Randbox zu füllen, indem es ähnlich wie 100% agiert, sich jedoch auf die Randbox bezieht statt auf die Box, die durch box-sizing bestimmt wird.

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

Barrierefreiheit

Stellen Sie sicher, dass Elemente, deren width-Eigenschaft festgelegt ist, nicht abgeschnitten oder andere Inhalte verdecken, wenn die Seite vergrößert wird, um die Schriftgröße zu erhöhen.

Formale Definition

Initialer Wert	`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 Prozentsatz

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