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 CSS Eigenschaft legt die Breite eines Elements fest. Standardmäßig wird die Breite des Inhaltsbereichs festgelegt. Wenn jedoch box-sizing auf border-box gesetzt ist, wird die Breite des Randbereichs festgelegt.

Probieren Sie es aus

width: 150px;

width: 20em;

width: 75%;

width: auto;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box where you can change the width.
  </div>
</section>

#example-element {
  display: flex;
  flex-direction: column;
  background-color: #5b6dcd;
  height: 80%;
  justify-content: center;
  color: #ffffff;
}

Der angegebene Wert von width 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 width.
Wenn der Wert für width größer ist als der Wert für max-width, dann überschreibt max-width width.

Hinweis: Als geometrische Eigenschaft gilt width auch für die SVG-Elemente <svg>, <rect>, <image> und <foreignObject>, wobei auto sich auf 100% für <svg> und 0 für andere Elemente auflöst 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(width);
width: anchor-size(--myAnchor inline, 120%);

/* <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 Distanzwert.
<percentage>: Definiert die Breite als Prozentsatz der Breite des umschließenden Blocks.
auto: Der Browser berechnet und wählt eine Breite für das angegebene Element aus.
max-content: Die intrinsische bevorzugte Breite.
min-content: Die intrinsische Mindestbreite.
fit-content: Verwenden Sie den verfügbaren Platz, jedoch nicht mehr als max-content, also 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, also min(max-content, max(min-content, <length-percentage>)).
stretch: Stellt die Breite der Rahmenbox des Elements auf die Breite seines umschließenden Blocks ein. Es versucht, die Rahmenbox auf den verfügbaren Platz im umschließenden Block zu füllen, verhält sich also in gewisser Weise ähnlich wie 100%, wendet die resultierende Größe jedoch auf die Rahmenbox anstatt auf die durch box-sizing bestimmte Box an.

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 festgelegten width nicht abgeschnitten werden und/oder andere Inhalte nicht 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 Prozentangabe

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 with JavaScript enabled. Enable JavaScript to view data.

Siehe auch

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