width

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 von width kleiner als der Wert von min-width ist, überschreibt min-width die width.
• Wenn der Wert von width größer als der Wert von max-width ist, überschreibt max-width die 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 einen Distanzwert.

<percentage>

Definiert die Breite als Prozentsatz der Breite des umgebenden Blocks.

auto

Der Browser berechnet und wählt eine Breite für das spezifizierte Element.

max-content

Die intrinsische bevorzugte Breite.

min-content

Die intrinsische Mindestbreite.

fit-content

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

fit-content(<length-percentage>)

Verwendet die fit-content-Formel mit dem verfügbaren Platz, ersetzt durch das angegebene Argument, d.h. min(max-content, max(min-content, <length-percentage>)).

stretch

Setzt die Breite der Randbox des Elements auf die Breite seines umgebenden Blocks. Es versucht, die Randbox zu füllen, indem es den verfügbaren Platz im umgebenden Block nutzt, verhält sich dabei ähnlich wie 100%, wendet jedoch die resultierende Größe auf die Randbox an, anstatt auf die durch box-sizing bestimmte Box.

Barrierefreiheit

Stellen Sie sicher, dass Elemente, die mit width gesetzt sind, nicht abgeschnitten werden und/oder keinen anderen Inhalt verdecken, wenn die Seite herangezoomt wird, um die Textgröße zu erhöhen.

• MDN Verständnis von WCAG, Leitlinie 1.4 Erklärungen
• Verständnis des Erfolgskriteriums 1.4.4 | W3C Verständnis von 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 Prozentwerten

.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 strecken, 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-Box-Modell Leitfaden
• CSS-Box-Modell Modul