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

Anfangswertauto
Anwendbar aufalle Elemente außer nicht ersetzte Inlineelemente, Tabellenzeilen und Zeilengruppen
VererbtNein
Prozentwertebezieht sich auf die Breite des äußeren Elements
Berechneter Wertein Prozentwert oder auto oder die absolute Länge
AnimationstypLä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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
width
anchor-size()
Experimental
auto
fit-content
fit-content()
Experimental
Is animatable
max-content
min-content
stretch

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.
User must explicitly enable this feature.
Uses a non-standard name.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Siehe auch