width & height

Zuletzt aktualisiert am 15. Februar 2026

Mit width und height bestimmst du, wie groß ein Element auf dem Bildschirm dargestellt wird. Block-Elemente nehmen standardmäßig die volle verfügbare Breite ein, während ihre Höhe vom Inhalt abhängt. In den meisten Fällen willst du nur die Breite setzen und die Höhe dem Browser überlassen. Zusammen mit den min- und max-Varianten hast du die volle Kontrolle über die Dimensionen deiner Elemente.

Grundlagen

Block-Elemente wie <div> nehmen ohne width die volle Breite ihres Elternelements ein. Inline-Elemente wie <span> werden nur so breit wie ihr Inhalt, und width hat bei ihnen keine Wirkung. Das Verhalten von height ist bei beiden gleich: Ohne Angabe richtet sich die Höhe nach dem Inhalt.

Wie width und height berechnet werden, hängt von box-sizing ab. Mit dem Standard content-box beziehen sich die Werte nur auf den Inhaltsbereich. Mit border-box (empfohlen) beinhalten sie auch Padding und Border.

Syntax & Werte

Beispiele

Feste vs. flexible Breite

.box-fixed {
  width: 250px;
  background: #dbeafe;
  padding: 16px;
}

.box-percent {
  width: 75%;
  background: #ede9fe;
  padding: 16px;
}

.box-auto {
  /* Standard: volle Breite */
  background: #d1fae5;
  padding: 16px;
}

<div class="box-fixed">width: 250px (feste Breite)</div>
<div class="box-percent">width: 75% (relativ zum Elternelement)</div>
<div class="box-auto">width: auto (volle verfügbare Breite)</div>

min-width und max-width

Mit min-width und max-width setzt du Grenzen, innerhalb derer sich die Breite anpassen darf. Das ist besonders nützlich für responsive Layouts.

.responsive-box {
  width: 80%;
  min-width: 200px;
  max-width: 500px;
  background: #dbeafe;
  padding: 16px;
}

<div class="responsive-box">Diese Box ist 80% breit, aber nie schmaler als 200px und nie breiter als 500px.</div>

Warum feste Höhen problematisch sind

Feste Höhen führen zu Problemen, sobald der Inhalt länger wird als erwartet. Der Text läuft über und überlappt andere Elemente.

/* Problematisch: feste Höhe */
.box-height-fixed {
  height: 60px;
  background: #fecaca;
}

/* Besser: Mindesthöhe */
.box-height-min {
  min-height: 60px;
  background: #d1fae5;
}

<div class="box-height-fixed">Feste Höhe: 60px. Dieser Text ist zu lang und läuft aus der Box heraus. Das ist ein häufiger Fehler.</div>
<div class="box-height-min">min-height: 60px. Die Box wächst mit dem Inhalt mit. Viel besser!</div>

Intrinsische Größenwerte

Die Werte min-content, max-content und fit-content richten sich nach dem Inhalt des Elements, nicht nach dem Elternelement.

.intrinsic-min {
  width: min-content;
  background: #dbeafe;
}

.intrinsic-max {
  width: max-content;
  background: #ede9fe;
}

.intrinsic-fit {
  width: fit-content;
  background: #fef3c7;
}

<div class="intrinsic-min">min-content: So schmal wie möglich</div>
<div class="intrinsic-max">max-content: So breit wie nötig, auch wenn der Text über den Viewport hinausgeht</div>
<div class="intrinsic-fit">fit-content: Schrumpft auf verfügbare Breite</div>

Logische Properties: inline-size und block-size

Die logischen Varianten inline-size und block-size funktionieren genauso wie width und height, beziehen sich aber auf die Schreibrichtung statt auf physische Achsen. In westlichen Sprachen (links nach rechts, oben nach unten) ist inline-size gleichbedeutend mit width und block-size mit height. In vertikalen Schriften (z.B. Japanisch) drehen sich die Achsen.

Für internationale Projekte oder wenn du konsistent logische Properties verwenden willst, sind inline-size und block-size die modernere Wahl.

Barrierefreiheit

Touch-Target-Größe: Interaktive Elemente wie Buttons oder Links sollten mindestens 44x44px groß sein (WCAG 2.5.8 Target Size). Nutze min-width und min-height, um diese Mindestgröße zu garantieren, auch wenn der Inhalt kürzer ist. Nur Text oder Icon reicht oft nicht aus, Padding hilft zusätzlich.

Vermeid feste Höhen für Textcontainer: Nutzer können die Schriftgröße im Browser erhöhen oder auf 200% zoomen (WCAG 1.4.4 Resize Text). Feste height-Werte schneiden Text ab und machen Inhalte unlesbar. Verwende stattdessen min-height oder lass die Höhe auf auto, damit der Container mit dem Inhalt wachsen kann. Das gilt besonders für mehrsprachige Websites, wo Texte unterschiedlich lang sein können.

Responsive Breiten: Verwende max-width statt fester width für Container mit Text. Bei hohem Zoom oder schmalen Viewports bleibt der Inhalt lesbar, ohne horizontales Scrollen zu erzwingen. Das verbessert die Nutzererfahrung auf mobilen Geräten und bei Vergrößerung erheblich.

Häufige Fehler

• Feste height für Textcontainer: Der Inhalt läuft über, sobald er länger wird. Verwende stattdessen min-height oder lass die Höhe auf auto.
• width auf Inline-Elementen: width hat bei <span>, <a> oder <strong> keine Wirkung. Setze zuerst display: block oder display: inline-block.
• Prozentuale Höhe ohne Eltern-Höhe: height: 50% funktioniert nur, wenn das Elternelement eine explizite Höhe hat. Ohne diese Angabe wird der Wert ignoriert.
• width: 100% ohne border-box: Mit dem Standard content-box wird die Box breiter als der Container, weil Padding und Border obendrauf kommen. Setze box-sizing: border-box.
• max-width und width verwechseln: max-width begrenzt nach oben, erlaubt aber Schrumpfen. width setzt eine feste Breite, die nicht schrumpft (außer bei min-width Konflikten).

Browser-Kompatibilität

width, height und die min/max-Varianten werden von allen Browsern unterstützt. Die intrinsischen Größenwerte und logische Properties sind ebenfalls breit verfügbar.

Email-Kompatibilität

In HTML-Emails ist width gut unterstützt, aber height und moderne Werte wie min-content oder fit-content funktionieren in vielen Clients nicht.

Verwandte Eigenschaften