width

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

Syntax

/* <length> values */
width: 300px;
width: 25em;
width: anchor-size(width);
width: anchor-size(--my-anchor 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 ein Distanzwert.

<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 minimale intrinsische Breite.

fit-content

Nutzt den verfügbaren Platz, aber nicht mehr als max-content, d.h. min(max-content, max(min-content, stretch)).

fit-content(<length-percentage>)

Verwendet die fit-content Formel, wobei der verfügbare Platz durch das angegebene Argument ersetzt wird, d.h. min(max-content, max(min-content, <length-percentage>)).

stretch

Setzt die Breite der Außenabstandsbox des Elements auf die Breite seines umgebenden Blocks. Es versucht, die Außenabstandsbox so zu füllen, dass der verfügbare Raum im umgebenden Block genutzt wird, wobei es sich in gewisser Weise ähnlich verhält wie 100%, aber die resultierende Größe auf die Außenabstandsbox anwendet und nicht auf die durch box-sizing bestimmte Box.

Barrierefreiheit

Stellen Sie sicher, dass Elemente mit einer festgelegten width nicht abgeschnitten werden und/oder keinen anderen Inhalt verdecken, wenn die Seite zur Vergrößerung der Textgröße gezoomt wird.

• MDN verstehen WCAG, Leitfaden 1.4 Erklärungen
• Verstehen des Erfolgskriteriums 1.4.4 | W3C Verständnis der 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

p.gold {
 background: gold;
}

<p class="gold">The MDN community writes really great documentation.</p>

Beispiel mit Pixeln und Ems

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

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

Beispiel mit Prozentangaben

.percent {
 width: 20%;
 background-color: silver;
 border: 1px solid red;
}

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

Beispiel mit "max-content"

p.max-green {
 background: lightgreen;
 width: max-content;
}

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

Beispiel mit "min-content"

p.min-blue {
 background: lightblue;
 width: min-content;
}

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

Breite dehnen, um den umgebenden Block zu füllen

HTML

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

CSS

@supports not (width: stretch) {
 .parent {
 display: none !important;
 }
 body::after {
 content: "Your browser doesn't support the `stretch` value yet.";
 }
}

.parent {
 border: solid;
 margin: 1rem;
 display: flex;
}
.child {
 background: #00999999;
 margin: 1rem;
}
.stretch {
 width: stretch;
}

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• height
• box-sizing
• min-width, max-width
• block-size, inline-size
• anchor-size()
• SVG width Attribut
• Einführung in das CSS-Boxmodell Leitfaden
• CSS-Boxmodell Modul