CSS width-Eigenschaft
Die CSS-Eigenschaft width legt die Breite eines Elements fest. Probiere Beispiele mit jedem Wert dieser Eigenschaft aus.
Die CSS-Eigenschaft width legt die Breite des Inhaltsbereichs eines Elements fest — das innere Feld, das Text und untergeordnete Elemente enthält. Standardmäßig schließt diese Breite nicht den Rahmen, das Padding oder den Margin ein: Diese werden zusätzlich hinzugefügt, sodass die gesamte gerenderte Breite des Elements width + padding + border beträgt.
Diese Seite erklärt, was width misst, jeden Wert, den es akzeptiert (einschließlich der modernen intrinsischen Schlüsselwörter min-content, max-content und fit-content), wie Prozentwerte aufgelöst werden, und den häufigen Box-Modell-Fehler, über den die meisten Einsteiger stolpern.
Wie width mit dem Box-Modell interagiert
Wie width gemessen wird, hängt von der Eigenschaft box-sizing ab:
content-box(der Standard) —widthdimensioniert nur den Inhalt. Padding und Border werden außerhalb hinzugefügt. Eine Box mitwidth: 200px; padding: 20px; border: 5px solidwird 250px breit gerendert.border-box—widthdimensioniert Inhalt, Padding und Border zusammen. Dieselben Angaben ergeben genau 200px Breite, und der Inhaltsbereich wird entsprechend kleiner.
Da border-box Elementgrößen vorhersehbar macht, setzen viele Stylesheets es global:
*,
*::before,
*::after {
box-sizing: border-box;
}Auf welche Elemente width angewendet wird
Die Eigenschaft width gilt für alle Elemente außer nicht-ersetzten Inline-Elementen (z. B. einem einfachen <span>), Tabellenzeilen und Zeilengruppen (d. h. <thead>, <tfoot> und <tbody>). Um einem Inline-Element eine Breite zu geben, muss zuerst display: inline-block oder display: block gesetzt werden.
Die Eigenschaft akzeptiert eine CSS-Länge (px, pt, em usw.), einen Prozentwert oder ein Schlüsselwort wie auto oder max-content.
Ein Prozentwert wird relativ zur Breite des Elternelements (dem enthaltenden Block) aufgelöst. Bei absolut positionierten Elementen wird der Prozentwert relativ zur Breite des Padding-Box des enthaltenden Blocks berechnet.
Die Eigenschaft width kann durch min-width und max-width überschrieben werden: Ein max-width-Wert, der kleiner als width ist, hat Vorrang, und ein min-width-Wert, der größer als width ist, hat ebenfalls Vorrang. Die verwandte Eigenschaft ist height.
Negative Längenwerte sind nicht erlaubt.
| Anfangswert | auto |
|---|---|
| Gilt für | Alle Elemente außer nicht-ersetzte Inline-Elemente, Tabellenzeilen und Zeilengruppen. |
| Vererbt | Nein. |
| Animierbar | Ja. Die Breite eines Elements ist animierbar. |
| Version | CSS1 |
| DOM Syntax | Object.style.width = "300px"; |
Syntax
Syntax der CSS width-Eigenschaft
width: auto | length | percentage | initial | inherit | fit-content | min-content | max-content | stretch;Beispiel der width-Eigenschaft mit "%":
Beispiel der CSS width-Eigenschaft mit %-Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 50%;
background-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Width property example</h2>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</body>
</html>Ergebnis
Im gegebenen Beispiel beträgt die Breite des div-Containers 50 % — die Hälfte der Breite seines Elternelements (hier das <body>-Element).
Im folgenden Beispiel beträgt die Breite des ersten Elements 250px und die des zweiten Elements 25em:
Beispiel der width-Eigenschaft mit "px" und "em":
Beispiel der CSS width-Eigenschaft mit px- und em-Werten
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.t1 {
width: 250px;
border: 1px solid black;
background-color: #1c87c9;
}
div.t2 {
width: 25em;
border: 1px solid black;
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>Width property example</h2>
<h3>width: 250px</h3>
<div class="t1">
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<h3>width: 25em</h3>
<div class="t2">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Intrinsische Größen-Schlüsselwörter
Neben festen Längen und Prozentwerten akzeptiert width auch Schlüsselwörter, die ein Element anhand seines Inhalts statt anhand seines Containers dimensionieren:
max-content— die Breite, die der Inhalt bevorzugt, wenn er nie umgebrochen wird. Bei einem Absatz ist das der gesamte Text in einer Zeile.min-content— die kleinste Breite ohne Überlauf, d. h. die Breite des längsten nicht trennbaren Worts.fit-content— wächst mit dem Inhalt wiemax-content, überschreitet aber nie den verfügbaren Platz und bricht um, sobald der Containerrand erreicht wird. Ideal für Elemente mit "Shrink-to-Fit"-Verhalten wie Buttons oder Badges.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
border: 2px solid #1c87c9;
margin-bottom: 10px;
padding: 5px;
}
.min { width: min-content; }
.max { width: max-content; }
.fit { width: fit-content; }
</style>
</head>
<body>
<div class="min">width: min-content</div>
<div class="max">width: max-content</div>
<div class="fit">width: fit-content</div>
</body>
</html>Die min-content-Box ist so schmal wie das längste Wort, die max-content-Box dehnt sich aus, um die gesamte Zeile aufzunehmen, und die fit-content-Box liegt je nach verfügbarem Platz zwischen den beiden.
Werte
| Wert | Beschreibung | Ausprobieren |
|---|---|---|
| auto | Der Browser berechnet eine Breite für das angegebene Element. Dies ist der Standardwert. | Ausprobieren » |
| length | Definiert die Breite in px, pt, cm usw. | Ausprobieren » |
| percentage | Definiert die Breite in Prozent des enthaltenden Elements. | Ausprobieren » |
| initial | Setzt die Eigenschaft auf ihren Standardwert. | Ausprobieren » |
| inherit | Erbt die Eigenschaft vom Elternelement. | |
| fit-content | Berechnet die Breite anhand der intrinsischen Inhaltsgröße. | Ausprobieren » |
| min-content | Berechnet die Breite anhand der minimalen Inhaltsgröße. | Ausprobieren » |
| max-content | Berechnet die Breite anhand der maximalen Inhaltsgröße. | Ausprobieren » |
| stretch | Dehnt das Element aus, um den Container auszufüllen. | Ausprobieren » |
Häufige Fallstricke
- Ein prozentualer Breitenwert ohne definierte Elternbreite. Wenn die Breite des Elternelements
autoist, wird ein Prozentwert möglicherweise nicht wie erwartet aufgelöst. Gib dem enthaltenden Block eine explizite Breite (oder verlasse dich auf die natürliche volle Breite eines Block-Elements). - Padding und Border sprengen das Layout. Im Standard-
content-box-Modell lässt das Hinzufügen von Padding zu einem 100% breiten Element dieses das Elternelement überfluten. Wechsle zubox-sizing: border-box, um die Gesamtbreite bei 100% zu halten. widthbei Inline-Elementen wird ignoriert. Setze zuerstdisplay: inline-blockoderblock.- Responsivität. Bevorzuge
max-widthgegenüber einem festenwidth-Wert für fluid Layouts:max-width: 600pxlässt eine Box auf kleinen Bildschirmen schrumpfen, begrenzt sie aber auf großen.