`width` CSS property

Baseline Weitgehend verfügbar *

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

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 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, überschreibt min-width width.
Wenn der Wert für width größer als der Wert für max-width ist, ü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-width-Eigenschaftswert überschreibt jeden auf das SVG-Element gesetzten 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 Distanzwert.
<percentage>: Definiert die Breite als Prozentsatz der Breite des umfassenden Blocks.
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: Verwendet 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. Bei der Definition der width eines anker-positionierten Elements wird der erste Parameter standardmäßig als die Breite des zugehörigen Ankers verwendet. Wenn es auf ein nicht-anker-positioniertes Element angewendet wird, wird die Breite auf den Ersatzwert gesetzt. Wenn kein Ersatzwert 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, und klemmt die Breite gemäß der Formel min(maximale Größe, max(minimale Größe, <length-percentage>)).
stretch: Setzt die Breite des Randbox des Elements auf die Breite seines umfassenden Blocks. Es versucht, die Randbox so auszufüllen, dass sie den verfügbaren Platz im umfassenden Block besetzt, verhält sich also ähnlich wie 100%, wendet die resultierende Größe jedoch auf die Randbox an und nicht auf die Box, die durch box-sizing bestimmt wird.

Barrierefreiheit

Stellen Sie sicher, dass Elemente mit einer width nicht abgeschnitten sind 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 Grundnutzung 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, wobei die width des zweiten Absatzes explizit auf auto gesetzt wird.

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 auf 20em Breite gesetzt wird. Beide Elemente haben auch unterschiedliche background-color, color und border Werte, um sie bei der Darstellung zu unterscheiden.

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 Prozentsätzen

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 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 gleichem Inhalt ein; ihre Klassennamen unterscheiden sich lediglich.

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, des zweiten auf min-content und des dritten auf die doppelte Größe des min-content durch Nutzung der calc-size()-Funktion. Jeder erhält eine unterschiedliche background-color und border-style, um sie zu unterscheiden.

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::before {
    content: "Your browser doesn't support the calc-size() function yet.";
    background-color: wheat;
    display: block;
    text-align: center;
    padding: 1rem 0;
  }
}

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 wird auf die doppelte Breite des min-content gesetzt.

Verwendung des Schlüsselworts stretch

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

HTML

Wir fügen einen Elterncontainer mit zwei Kindelementen 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 Eltern als Flex-Container zu deklarieren, und setzen die width des zweiten Kind-Elements auf stretch.

css

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

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

.stretch {
  width: stretch;
}

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

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 die Randbox des Elements ansonsten an die Breite seines umfassenden Blocks geklammert wird.

Verwendung der anchor-size()-Funktion

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

HTML

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

html

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

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

CSS

Wir erklären 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 am Anker und definieren die Breite des anker-positionierten Elements, indem wir die anchor-size()-Funktion als Wert der width-Eigenschaft verwenden. Als Bonus verwenden wir die anchor-size()-Funktion auch zur Definition der left-Position der Infobox, sodass 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;
}

@supports not (width: anchor-size(width)) {
  body::before {
    content: "Your browser doesn't support the anchor-size() function value.";
    background-color: wheat;
    display: block;
    text-align: center;
    padding: 1rem 0;
  }
}

Ergebnisse

Beachten Sie, wie die Breite der Infobox immer mit der Breite des Ankerelements übereinstimmt.

Spezifikationen

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

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

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

width CSS property

HTML

CSS

Ergebnisse

HTML

CSS

Ergebnisse

HTML

CSS

Ergebnisse

HTML

CSS

Ergebnisse

HTML

CSS

Ergebnis

HTML

CSS

Ergebnisse

Help improve MDN

`width` CSS property