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 setzt sie die Breite des Inhaltsbereichs, aber wenn box-sizing auf border-box gesetzt ist, definiert sie die Breite des Randbereichs.

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

Hinweis: Als geometrische Eigenschaft gilt width auch für die <svg>, <rect>, <image> und <foreignObject> SVG-Elemente, wobei auto sich für <svg> auf 100% und für andere Elemente auf 0 auflöst und Prozentwerte sich auf die SVG-Ansichtsfensterbreite für <rect> beziehen. Der CSS width Eigenschaftswert überschreibt jeden SVG width Attributwert, der am SVG-Element gesetzt ist.

Syntax

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

<percentage>

Definiert die Breite als Prozentsatz der Breite des Umgebungsblocks.

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 Raum, 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 Raum, ersetzt durch das angegebene Argument, also min(max-content, max(min-content, <length-percentage>)).

stretch

Setzt die Breite der Margin-Box des Elements auf die Breite seines Umgebungsblocks. Es versucht, die Margin-Box in den verfügbaren Raum des Umgebungsblocks zu füllen, verhält sich also ähnlich wie 100%, wendet die resultierende Größe jedoch auf die Margin-Box an, anstatt auf die Box, die durch box-sizing bestimmt wird.

Barrierefreiheit

Stellen Sie sicher, dass Elemente mit einer gesetzten width weder abgeschnitten 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> = 
  <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.gold {
  background: gold;
}
html
<p class="gold">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 Prozentwert

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>

Breite strecken, um den Umgebungsblock zu füllen

HTML

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

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

CSS

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

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

.stretch {
  width: stretch;
}

Ergebnis

Spezifikationen

Specification
CSS Box Sizing Module Level 4
# sizing-values

Browser-Kompatibilität

Siehe auch