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.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

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

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: #ffffff;
}

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

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

Syntax

css
/* <length> values */
width: 300px;
width: 25em;
width: anchor-size(width);
width: anchor-size(--myAnchor 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 enthältenden 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)).

fit-content(<length-percentage>)

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

stretch

Setzt die Breite des Randbereichs des Elements auf die Breite seines enthältenden Blocks. Es versucht, den Randbereich zu füllen, verhält sich also ähnlich wie 100%, wendet die resultierende Größe jedoch auf den Randbereich und nicht auf den von box-sizing bestimmten Bereich an.

Hinweis: Um die von Browsern verwendeten Aliasnamen für den stretch-Wert und dessen Implementierungsstatus zu überprüfen, siehe den Abschnitt Browser-Kompatibilität.

Barrierefreiheit

Stellen Sie sicher, dass Elemente mit einer festgelegten width nicht abgeschnitten werden und/oder andere Inhalte nicht 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 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>

Spezifikationen

Specification
CSS Box Sizing Module Level 4
# width-height-keywords
CSS Box Sizing Module Level 4
# sizing-values

Browser-Kompatibilität

Siehe auch