width

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 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, legt sie die Breite des Rahmenbereichs 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, dann überschreibt min-width width.
Wenn der Wert für width größer als der Wert für max-width ist, dann ü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> zu 100% und für andere Elemente zu 0 aufgelöst wird, und Prozentwerte relativ zur Breite des SVG-Ansichtsfensters für <rect> sind. Der CSS-Wert der Eigenschaft width überschreibt jeden auf dem SVG-Element gesetzten Wert des SVG-Attributes width.

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 einen Distanzwert.
<percentage>: Definiert die Breite als Prozentsatz der Breite des umfassenden Blocks.
auto: Der Browser berechnet und wählt eine Breite für das spezifizierte Element aus.
max-content: Die intrinsische bevorzugte Breite.
min-content: Die intrinsische Mindestbreite.
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 Platz durch das angegebene Argument ersetzt wird, d.h. min(max-content, max(min-content, <length-percentage>)).
stretch: Setzt die Breite der Randbox des Elements auf die Breite seines umfassenden Blocks. Es versucht, die Randbox so zu gestalten, dass sie den verfügbaren Platz im umfassenden Block ausfüllt, verhält sich also in gewisser Weise ähnlich wie 100%, wendet die resultierende Größe jedoch auf die Randbox anstelle der durch box-sizing bestimmte Box an.

Barrierefreiheit

Stellen Sie sicher, dass Elemente, deren width festgelegt ist, beim Zoomen der Seite, um die Textgröße zu erhöhen, nicht abgeschnitten und/oder anderer Inhalt nicht verdeckt wird.

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

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 Prozentsatz

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 umfassenden Block auszufüllen

HTML

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

css

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

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

.stretch {
  width: stretch;
}

Ergebnis

Spezifikationen

Specification
CSS Box Sizing Module Level 4 # sizing-values

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

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

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