width & height

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.

Steckbrief width & height

Syntax: width: <length> | <percentage> | auto | min-content | max-content | fit-content
Initialwert: auto
Vererbt: Nein
Animierbar: Ja

Kategorie: Box-Modell
Werte: 6
Beispiele: 4
Browser: 5 von 5
E-Mail: 2 von 5
Stand: 15.02.2026

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

6 Werte

Wert	Beschreibung	Beispiel
`auto`	Standardwert. Block-Elemente füllen die verfügbare Breite, Höhe richtet sich nach dem Inhalt.	width: auto
`<length>`	Fester Wert in einer CSS-Einheit.	width: 300px
`<percentage>`	Prozentualer Anteil des Elternelements.	width: 50%
`min-content`	So schmal wie möglich, ohne dass Inhalt überläuft (außer an Umbruchstellen).	width: min-content
`max-content`	So breit wie nötig, um den gesamten Inhalt in einer Zeile darzustellen.	width: max-content
`fit-content`	Verhält sich wie max-content, schrumpft aber auf die verfügbare Breite wenn nötig.	width: fit-content

Beispiele

4 Beispiele

Verschiedene Breiten-Werte

.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>

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 Grenzen mit min/max

.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>

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

height vs. min-height

/* 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>

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

min-content, max-content, fit-content

.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

5 Fehler

01 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.

02 width auf Inline-Elementen

width hat bei <span>, <a> oder <strong> keine Wirkung. Setze zuerst display: block oder display: inline-block.

03 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.

04 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.

05 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

5 von 5

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.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

2 von 5

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

Apple Mail

Komplett
Gmail

Teilweise

width in px und % funktioniert, min/max-width teilweise ignoriert
Outlook

Teilweise

Nur feste Werte in px, Prozent teilweise problematisch
Thunderbird

Komplett
Yahoo Mail

Teilweise

Grundlegende width-Unterstützung

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da