width

Werte

• auto – der Browser bestimmt die Breite: ein Block füllt sein Elternelement aus (abzüglich der Außenabstände), ein gefloatetes oder absolut positioniertes Element schrumpft auf seinen Inhalt.
• Länge – eine feste Breite, z. B. 300px, 20em, 50vw.
• Prozent – ein Anteil an der Inhaltsbreite des Elternelements (des umgebenden Blocks).
• min-content – die kleinste Breite ohne Überlauf: das längste Wort oder Bild.
• max-content – die Breite des Inhalts ohne Zeilenumbrüche.
• fit-content – nach dem Inhalt, aber höchstens so breit wie das Elternelement (langer Text bricht um).

Standardmäßig gilt die Breite nur für den Inhalt – padding und border kommen hinzu. box-sizing: border-box ändert das.

Initialwert: auto. Vererbt: nein. Gilt für: alle Elemente außer Inline-Elementen, Tabellenzeilen und Zeilengruppen.

Beispiele

Eine feste Breite, eine Prozentangabe und eine Breite nach dem Inhalt:

<div class="bar fixed">300px</div>
<div class="bar half">50%</div>
<div class="bar content">fit-content</div>

.bar {
  margin-bottom: 8px;
  padding: 6px 10px;
  background: #eaf7ff;
  border: 1px solid #38b8f9;
}
.fixed { width: 300px; }
.half { width: 50%; }
.content { width: fit-content; }

Ohne box-sizing: border-box kommen Innenabstand und Rahmen zur Breite hinzu – ein Element mit width: 100% ragt dann aus seinem Elternelement heraus:

<div class="parent">
  <div class="child">width: 100% + padding</div>
</div>

.parent {
  width: 260px;
  border: 2px dashed #999;
}
.child {
  width: 100%;
  padding: 10px 20px;
  background: #eaf7ff;
  border: 1px solid #38b8f9;
}

Das Kind ist 260 + 40 + 2 = 302 px breit und ragt um 42 px heraus.

Worauf Sie achten sollten

• width wirkt nicht auf Inline-Elemente (span, a…) – sie brauchen display: inline-block oder block.
• Eine feste Breite in px läuft auf dem Handy über. Für den Seiteninhalt ist max-width besser (z. B. max-width: 800px), das Element schrumpft dann auf einem schmalen Bildschirm.
• Prozentwerte werden vom Elternelement berechnet. Richtet sich das Elternelement nach seinem Inhalt (zum Beispiel ein inline-block ohne Breite), kann das Ergebnis überraschen.
• Bei Flex- und Grid-Elementen beeinflussen außerdem flex-basis, flex-shrink und die Größe der Rasterspur die Breite.

Browserunterstützung

Baseline – weithin verfügbar: funktioniert in allen gängigen Browsern, und das schon lange (spätestens seit 2015). Ab Version: Chrome 1, Firefox 1, Safari 1. Stand: Oktober 2026 (MDN browser-compat-data).

Siehe auch:
height
min-width
max-width
box-sizing
aspect-ratio
inline-size und block-size