width

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 dieser 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.

Syntax

/* <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 Distanzwert.

<percentage>

Definiert die Breite als Prozentsatz der Breite des umgebenden Blocks.

auto

Der Browser berechnet und wählt eine Breite für das festgelegte 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)).

anchor-size()

Setzt die Breite relativ zu einer Dimension eines Ankerelements. Beim Definieren der width eines anker-positionierten Elements wird der erste Parameter standardmäßig auf die Breite des zugehörigen Ankers gesetzt. Wenn es auf ein nicht-an-anker-positioniertes Element angewendet wird, setzt es die Breite auf den Ausweichwert. Wenn kein Ausweichwert definiert ist, wird die Deklaration ignoriert.

calc-size()

Setzt die Breite auf eine modifizierte intrinsische Größe.

fit-content(<length-percentage>)

Nutzt die Fit-Content-Formel mit dem verfügbaren Platz ersetzt durch das angegebene Argument, wobei die Breite laut der Formel min(maximum size, max(minimum size, <length-percentage>)) geklammert wird.

stretch

Setzt die Breite des Randkastens des Elements auf die Breite des umgebenden Blocks. Es versucht, den Randkasten so zu machen, dass er den verfügbaren Platz im umgebenden Block füllt und verhält sich ähnlich wie 100%, wendet die resultierende Größe jedoch auf den Randkasten anstatt auf das durch box-sizing bestimmte Kästchen an.

Barrierefreiheit

Stellen Sie sicher, dass Elemente mit einer festgelegten width nicht abgeschnitten werden und/oder keinen anderen Inhalt verdecken, wenn die Seite vergrößert wird, um die Textgröße zu erhöhen.

• MDN Understanding WCAG, Guideline 1.4-Erklärungen
• Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0

Formale Definition

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 Verwendung und den Standardwert auto.

HTML

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

<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 setzen die width des zweiten Absatzes explizit auf auto.

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

Ergebnisse

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

Verwenden von Längeneinheiten

Dieses Beispiel zeigt Breitenwerte in Längen.

HTML

Wir fügen zwei <div>-Elemente mit einigen Texten hinzu.

<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 auf 20em Breite gesetzt wird. Beide Elemente haben auch unterschiedliche background-color, color und border Werte, um die Unterscheidung zwischen den beiden beim Rendern zu ermöglichen.

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

Verwenden von Prozentsätzen

Dieses Beispiel zeigt die Verwendung von Prozentwerten.

HTML

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

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

CSS

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

.percent {
  width: 20%;

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

Ergebnisse

Verwenden von intrinsischen 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 hinzu; nur ihre Klassennamen unterscheiden sich.

<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 auf die doppelte Größe von min-content, indem wir die calc-size()-Funktion verwenden. Jeder bekommt eine andere background-color und border-style, um die Unterscheidung zwischen den beiden zu ermöglichen.

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 längste Wort. Das calc-size()-Beispiel ist doppelt so breit wie das min-content.

Verwendung des Stretch-Schlüsselworts

Dieses Beispiel zeigt den Wert stretch in einem Flex-Container.

HTML

Wir fügen einen übergeordneten Container mit zwei Kindelementen hinzu.

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

CSS

Wir verwenden die display-Eigenschaft, um den übergeordneten Container zu einem Flex-Container zu machen und setzen die width des zweiten Kindes auf stretch.

.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 macht das Element so breit, wie es der verfügbare Platz erlaubt, wobei der Randkasten des Elements ansonsten auf die Breite seines umgebenden Blocks geklammert wird.

Verwendung der anchor-size()-Funktion

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

HTML

Wir geben zwei <div>-Elemente an: ein anchor-Element und ein infobox-Element, das wir relativ zum Anker positionieren.

<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 verknüpft. Wir setzen auch absolute height- und width-Dimensionen auf den Anker und definieren die Breite des anker-positionierten Elements, um die Breite des Ankers mit der anchor-size()-Funktion als Wert der width-Eigenschaft zu setzen. Als Bonus verwenden wir die anchor-size()-Funktion auch, um die left-Position der Infobox zu definieren und so den Abstand zwischen dem Anker und der Infobox auf ein Viertel der Höhe des Ankers zu machen.

.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, dass die Breite der Infobox immer der Breite des Ankerelements entspricht.

Spezifikationen

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-Ankerpositionierung Modul
• CSS-Werte und Einheiten Modul