width

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.

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

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

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: white;
}

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>, <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-Viewport-Breite für <rect> sind. Der CSS-Wert der Eigenschaft width überschreibt jeden auf dem SVG-Element festgelegten SVG-width-Attributwert.

Syntax

css

/* <length> values */
width: 300px;
width: 25em;

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

/* Keyword values */
width: max-content;
width: min-content;
width: fit-content;
width: auto;
width: stretch;

/* function values */
width: fit-content(20em);
width: anchor-size(width);
width: anchor-size(--my-anchor inline, 120%);
width: calc-size(max-content, size / 2);

/* 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 intrinsisch bevorzugte Breite.
min-content: Die intrinsisch minimale Breite.
fit-content: Verwendet den verfügbaren Platz, aber nicht mehr als max-content, d.h. min(max-content, max(min-content, stretch)).
anchor-size(): Setzt die Breite relativ zu einer Dimension eines Ankerelements. Wenn die width eines anchor-positionierten Elements definiert wird, wird der erste Parameter standardmäßig auf die Breite des zugehörigen Ankers gesetzt. Wenn es auf ein nicht-anchor-positioniertes Element angewendet wird, setzt es die Breite auf den Fallback-Wert. Wenn kein Fallback definiert ist, wird die Deklaration ignoriert.
calc-size(): Setzt die Breite auf eine modifizierte intrinsische Größe.
fit-content(<length-percentage>): Verwendet die fit-content-Formel mit dem verfügbaren Platz, der durch das angegebene Argument ersetzt wird, wobei die Breite gemäß der Formel min(maximale Größe, max(minimale Größe, <length-percentage>)) geklammert wird.
stretch: Setzt die Breite des Randkastens des Elements auf die Breite seines umgebenden Blocks. Es versucht, den Randkasten so zu füllen, dass er den verfügbaren Platz im umgebenden Block ausfüllt, ähnlich wie bei 100%, wobei die resultierende Größe jedoch auf den Randkasten angewendet wird und nicht auf den durch box-sizing bestimmten Kasten.

Barrierefreiheit

Stellen Sie sicher, dass Elemente mit festgelegter width 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()>                           |
  stretch                                   |
  fit-content                               |
  contain                                   

<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> = 
  <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

Dieses Beispiel zeigt die grundlegende Nutzung und den Standardwert auto.

HTML

Wir fügen zwei Absätze ein; einer mit einem Klassennamen.

html

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

CSS

Wir geben allen Absätzen einen goldenen Hintergrund und legen die width des zweiten Absatzes explizit auf auto fest.

css

p {
  background: gold;
}
p.has-width {
  width: auto;
}

Ergebnisse

Da width standardmäßig auf auto gesetzt ist, haben beide Absätze die gleiche Breite.

Verwendung von Längeneinheiten

Dieses Beispiel zeigt Breitenwerte in Längeneinheiten.

HTML

Wir fügen zwei <div>-Elemente mit etwas Text ein.

html

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

CSS

Das px_length-Element wird auf 200px gesetzt, während das em_length-Element eine Breite von 20em erhält. Beide Elemente haben auch unterschiedliche background-color, color und border Werte, um sie bei der Darstellung voneinander unterscheiden zu können.

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;
}

Ergebnisse

Das px_length-Element ist immer 200px breit. Die gerenderte Breite des em_length-Elements hängt von der Schriftgröße ab.

Verwendung von Prozentangaben

Dieses Beispiel zeigt die Verwendung von Prozentwerten.

HTML

Wir fügen ein <div>-Element mit etwas Text ein.

html

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

CSS

Wir setzen die width des Elements auf 20% der Breite seines übergeordneten Containers.

css

.percent {
  width: 20%;

  background-color: silver;
  border: 1px solid red;
}

Ergebnisse

Verwendung intrinsischer Größen

Dieses Beispiel vergleicht max-content und min-content und führt calc-size ein.

HTML

Wir fügen drei Absätze mit demselben Inhalt ein; ihre Klassennamen unterscheiden sich nur.

html

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

CSS

Wir setzen die width eines Absatzes auf max-content, den zweiten auf min-content und den dritten mit der calc-size()-Funktion auf die doppelte Größe des min-content. Jeder erhält eine unterschiedliche background-color und border-style, um sie voneinander unterscheiden zu können.

css

p.max-green {
  width: max-content;

  background-color: lightgreen;
  border-style: dotted;
}

p.min-blue {
  width: min-content;

  background-color: lightblue;
  border-style: dashed;
}

p.min-pink {
  width: calc-size(min-content, size * 2);

  background-color: pink;
  border-style: solid;
}

@supports not (width: calc-size(min-content, size * 2)) {
  body::after {
    content: "Your browser doesn't support the calc-size() function yet.";
    background-color: wheat;
    display: block;
    text-align: center;
    padding: 1em;
  }
}

Ergebnisse

Das max-content-Beispiel ist so breit wie der Text. Das min-content-Beispiel ist so breit wie das breiteste Wort. Das calc-size()-Beispiel ist doppelt so breit wie das min-content.

Verwendung des Stretch-Schlüsselworts

Dieses Beispiel zeigt den stretch-Wert innerhalb eines Flex-Containers.

HTML

Wir fügen einen übergeordneten Container mit zwei Kind-Elementen ein.

html

<div class="parent">
  <div class="child">text</div>
  <div class="child stretch">stretch</div>
</div>

CSS

Wir verwenden die display-Eigenschaft, um den Elternteil als Flex-Container zu definieren, und setzen die width des zweiten Kindes auf stretch.

css

.parent {
  border: solid;
  margin: 1rem;
  display: flex;
}

.child {
  background: #00999999;
  margin: 1rem;
}

.stretch {
  width: stretch;
}

@supports not (width: stretch) {
  body::after {
    content: "Your browser doesn't support the stretch value yet.";
    background-color: wheat;
    display: block;
    text-align: center;
    padding: 1em;
  }
}

Ergebnis

Standardmäßig sind Flex-Elemente so breit wie ihr Inhalt. Der stretch-Wert sorgt dafür, dass das Element so breit ist, wie es der verfügbare Platz zulässt, wobei der Randkasten sonst auf die Breite seines umgebenden Blocks begrenzt ist.

Verwendung der anchor-size()-Funktion

Dieses Beispiel zeigt die Verwendung der anchor-size()-Funktion zur Definition der Breite eines anchor-positionierten Elements; wir haben seine Breite als Vielfaches der Höhe seines Ankers definiert.

HTML

Wir spezifizieren zwei <div>-Elemente: ein anchor-Element und ein infobox-Element, das relativ zum Anker positioniert wird.

html

<div class="anchor">⚓︎</div>

<div class="infobox">
  <p>Infobox.</p>
</div>

CSS

Wir deklarieren das anchor-<div> als Ankerelement, indem wir ihm einen anchor-name geben. Das positionierte Element hat seine position-Eigenschaft auf absolute gesetzt und ist über seine position-anchor-Eigenschaft mit dem Ankerelement verbunden. Wir setzen auch absolute height und width-Dimensionen für den Anker und definieren die Breite des anchor-positionierten Elements als die Breite des Ankers, indem wir die anchor-size()-Funktion als Wert der width-Eigenschaft verwenden. Als Bonus nutzen wir auch die anchor-size()-Funktion, um die left-Position der Infobox zu definieren, wodurch der Abstand zwischen dem Anker und der Infobox ein Viertel der Höhe des Ankers beträgt.

.anchor {
  anchor-name: --my-anchor;
  width: 120px;
  height: 60px;

  font-size: 2rem;
  background-color: lightpink;
  text-align: center;
  align-content: center;
  outline: 1px solid black;
}

.infobox {
  position-anchor: --my-anchor;
  position: absolute;
  position-area: right;
  width: anchor-size(width);

  left: calc( anchor-size(height) / 4 )

  align-content: center;
  color: darkblue;
  background-color: azure;
  outline: 1px solid #dddddd;
}

body {
  padding: 5em;
}

Ergebnisse

Beachten Sie, wie die Breite der Infobox immer der Breite des Ankerelements entspricht.

Spezifikationen

Specification
CSS Box Sizing Module Level 4 # sizing-values

Browser-Kompatibilität

Siehe auch

height
box-sizing
min-width, max-width
block-size, inline-size
SVG-width-Attribut
Einführung in das CSS-Boxmodell-Leitfaden
CSS-Boxmodell-Modul
CSS-Anchor-Positionierung-Modul
CSS-Werte und Einheiten-Modul

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden