width

Die CSS-Eigenschaft width legt die Breite des Inhaltsbereichs eines Elements fest. Dieser „Inhaltsbereich“ ist der Teil innerhalb von Padding, Border und Margin eines Elements (das Box-Modell).

.wrap { 
  width: 80%;
}

Im obigen Beispiel sind Elemente mit dem Klassennamen .wrap zu 80 % so breit wie ihr Elternelement. Akzeptierte Werte sind alle Längenwerte, zusätzlich zu einigen später behandelten Schlüsselwörtern.

Die Breite kann durch die eng verwandten Eigenschaften min-width und max-width überschrieben werden.

.wrapper-1 {
  width: 100%;
  max-width: 320px; /* Will be AT MOST 320px wide */
}

.wrapper-2 {
  width: 100%;
  min-width: 20em; /* Will be AT LEAST 20em wide */
}

Tiefer graben

Bei der Verwendung von Prozent (%) für die Breite müssen Autoren bedenken, dass sich der Prozentsatz auf das Elternelement bezieht, also auf die Breite des enthaltenden Blocks. Wenn Ihr Elternteil auf 480 Pixel eingestellt ist – wie in unserem Demo gezeigt –, dann basiert der Prozentsatz auf diesem Wert. In unserem Fall ergeben 50 % von 480 Pixeln also 240 Pixel als berechneten Pixelwert.

Beachten Sie, dass width für alle Elemente außer nicht ersetzten oder Inline-Elementen, Tabellenzeilen und Zeilengruppen (d. h. thead, tfoot und tbody) gilt. Es scheint eine leichte Diskrepanz zu geben, wie HTML nicht ersetzte Elemente definiert und wie CSS sie definiert, aber wir beziehen uns darauf, wie CSS es tut: Elemente, deren Inhalt nicht durch das Tag selbst definiert wird, wie z. B. ein <img> mit dem Attribut src.

Für absolut positionierte Elemente, deren enthaltender Block auf einem Block-Container-Element basiert, wird der Prozentsatz im Verhältnis zur Breite der Padding-Box dieses Elements berechnet.

Schlüsselwort-Werte

Mit einigen speziellen Schlüsselwort-Werten ist es möglich, die Breite (und/oder Höhe) entsprechend dem Inhalt des Elements zu definieren.

min-content

Der Wert min-content ist das kleinste Maß, das um seinen Inhalt passt, wenn alle **weichen Umbruchmöglichkeiten** innerhalb der Box genutzt werden.

Das beste Beispiel für diese Art von Wert ist ein korrekt geschriebenes figure-Element

Sobald wir dieser Markup einige grundlegende Stile zugewiesen haben, erhalten wir

Wenn wir möchten, dass das Figure-Element im Wesentlichen die Größe dieses Bildes hat, sodass der Text an den Rändern des Bildes umbricht. Wir könnten es nach links oder rechts floaten, da float das gleiche „Shrink-to-Fit“-Verhalten aufweist, aber was, wenn wir es zentrieren möchten? min-content ermöglicht uns das Zentrieren.

Da wir min-content dem figure-Element zugewiesen haben, nimmt es die minimale Breite an, die es haben kann, wenn es alle weichen Umbruchmöglichkeiten (wie Leerzeichen zwischen Wörtern) nutzt, sodass der Inhalt immer noch in die Box passt.

max-content

Die Eigenschaft max-content bezieht sich auf das schmalste Maß, das eine Box einnehmen kann, um ihren Inhalt aufzunehmen – wenn keine weichen Umbruchmöglichkeiten innerhalb des Elements genutzt werden.

Schauen Sie, was passiert, wenn wir dies auf unser einfaches Kätzchen/Figure-Demo anwenden

Da die Bildunterschrift viel länger ist als das Bild breit ist (sie nutzt keine weichen Umbruchmöglichkeiten wie Leerzeichen zwischen Wörtern), muss sie die Bildunterschrift in einer einzigen Zeile anzeigen, wodurch die figure so breit wie diese Zeile ist.

fill-available

???. Eines der großen Rätsel des Lebens.

fit-content

Der Wert fit-content ist in seinem Verhalten grob äquivalent zu margin-left: auto und margin-right: auto, außer dass er für unbekannte Breiten funktioniert.

Nehmen wir zum Beispiel an, wir müssen eine Inline-Navigation über die Seite zentrieren. Am besten wenden Sie text-align: center auf die ul und display: inline-block auf die li an. Dies würde Ihnen etwas wie das Folgende geben

Der blaue Hintergrund (vom ul-Element) erstreckt sich jedoch über das gesamte Dokument, da die ul ein Block-Level-Element ist, was bedeutet, dass ihre Breite nur durch ihr enthaltendes Element begrenzt ist. Was, wenn wir möchten, dass der blaue Hintergrund um die Listenelemente herum zusammenfällt? fit-content hilft!

Mit fit-content und margin: 1em auto funktioniert das wie am Schnürchen und nur die Navigation hat einen farbigen Hintergrund, nicht die gesamte Dokumentbreite.

Wenn Sie auf so etwas stehen, werden Sie sich freuen zu wissen, dass die Formel zur Bestimmung der Größe einer fit-content-Länge lautet

fit-content = min(max-content, max(min-content, fill-available))

Dies ist ein ziemlich ungenutzter Wert. Wenn Ihnen also ein großartiger Anwendungsfall einfällt, lassen Sie es uns wissen!

Browser-Unterstützung

IE	Edge	Firefox	Chrome	Safari	Opera
Alle	Alle	Alle	Alle	Alle	Alle

Android Chrome	Android Firefox	Android Browser	iOS Safari	Opera Mobile
Alle	Alle	Alle	Alle	Alle

Weitere Informationen

Verwandte Eigenschaften