CSS Höhe und Breite
Sie rahmen eine Box, runden sie und geben äußeren und inneren Abstand. Nächster Schritt: entscheiden, wie groß die Box ist. width und height setzen die Größe der Content-Box — wie breit und wie hoch dieser Kern sein soll.
Was machen width und height?
width steuert die horizontale Größe. height steuert die vertikale. Übliche Werte nutzen Längen wie px oder relative Größen wie %. Wenn Sie sie unberührt lassen, berechnen viele Elemente ihre Größe aus Inhalt und Layout-Kontext.
Feste Größe in Pixeln
Ein klarer Alltagseinstieg: Geben Sie einem Panel eine genaue Breite (und optional Höhe) in Pixeln.
Feste Pixelbreite
css.panel {
width: 320px;
border: 1px solid #cbd5e1;
padding: 1rem;
background-color: #ffffff;
}Breite und Höhe zusammen
Wenn das Design ein festes Rechteck braucht — Thumbnail-Rahmen, Kachel, Medienplatz — setzen Sie beides.
Breite und Höhe auf einer Kachel
css.tile {
width: 160px;
height: 120px;
border: 2px solid #0f766e;
background-color: #ecfdf5;
}Prozentuale Breite
Eine %-Breite bezieht sich meist auf die Breite des Containing Blocks (oft das Elternelement). width: 50% heißt „etwa halb so breit wie mein Parent“, nicht magisch halb der Bildschirmbreite.
Halbe Parent-Breite
css.half {
width: 50%;
border: 1px solid #94a3b8;
padding: 0.75rem;
background-color: #f8fafc;
}Größen-Werkzeuge auf einen Blick
Neben schlichtem width und height gibt CSS Leitplanken.
📊 Breiten- und Höhen-Werkzeuge
| Werkzeug | Rolle | Alltag |
|---|---|---|
width / height |
Bevorzugte Größe der Content-Box | Hier starten für feste oder fließende Größen |
min-width / min-height |
Nicht darunter schrumpfen | Buttons oder Sidebars nutzbar halten |
max-width / max-height |
Nicht darüber wachsen | Große Bilder oder breite Texte dämpfen |
auto |
Browser berechnen lassen | Standardhöhe folgt oft dem Inhalt |
% |
Relativ zum Containing Block | Breiten-% üblich; Höhen-% braucht definierte Parent-Höhe |
min-width als Untergrenze
Nützlich, wenn eine Box trotz engem Layout nutzbar bleiben soll.
Mindestbreiten-Boden
css.btn-wide {
min-width: 12rem;
padding: 0.6rem 1rem;
background-color: #0f766e;
color: #ffffff;
border: none;
}max-width als Decke
Klassischer Habit für lesbaren Text oder Bilder, die auf großen Screens nicht endlos dehnen.
Maximalbreiten-Decke
css.prose {
max-width: 40rem;
width: 100%;
margin: 0 auto;
line-height: 1.6;
}Höhe bleibt oft auto
Bei Textblöcken Höhe mit dem Inhalt wachsen lassen. Eine sehr kleine feste Höhe kann Text abschneiden, wenn Sie Overflow nicht planen (spätere Lektion).
Auto-Höhe folgt dem Inhalt
css.article {
width: 100%;
max-width: 36rem;
height: auto; /* wächst mit den Absätzen */
padding: 1rem;
border: 1px solid #cbd5e1;
}Selbst ausprobieren
- Panel mit
width: 320pxund sichtbarem Padding/Rahmen. - 160×120-Kachel mit Breite und Höhe.
- Kind mit
width: 50%in einem breiteren Parent — Parent verkleinern. - Button mit
min-width: 12remund Viewport verkleinern. - Textblock mit
max-width: 40remundheight: auto— dann sehr kleine feste Höhe und Beschneidungsrisiko prüfen.
Typische Fehler
height: 50%ohne explizite Parent-Höhe (Prozent tut oft nicht, was Sie erwarten)- Kurze
heightauf Textbox und Wundern über abgeschnittenen Inhalt max-widthbei großen Bildern oder langen Zeilen vergessen- width (Content-Box-Größe) mit padding (inneres Polster) verwechseln
- Annehmen,
widthenthalte immer Rahmen und Padding — hängt vonbox-sizingab (bald)
Kurzfassung
widthundheightdimensionieren die Content-Boxpxfür feste Größen,%für fließende Breiten relativ zum Parentmin-*undmax-*setzen Boden und Decke- Bevorzugen Sie
height: autofür wachsenden Text - Prozentuale Höhe braucht einen Parent mit definierter Höhe
- Volle Box-Rechnung kommt in den nächsten Box-Model-Lektionen
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt