CSS Min- und Max-Werte
Mit den min- und max-Eigenschaften können wir die Größe von Elementen begrenzen. So stellen wir sicher, dass ein Element weder zu klein noch zu groß wird, auch wenn sich die Größe des Elterncontainers ändert.
Verfügbare Eigenschaften
Die Einstellungen min-width, max-width, min-height und max-height ermöglichen eine Feinabstimmung des Layouts. Sie werden häufig im responsiven Design verwendet.
| Eigenschaft | Beschreibung |
|---|---|
| min-width | Legt die minimale Breite fest, unter die das Element nicht gehen darf. |
| max-width | Legt die maximale Breite fest, über die das Element nicht wachsen darf. |
| min-height | Legt die minimale Höhe fest, unter die das Element nicht gehen darf. |
| max-height | Legt die maximale Höhe fest, über die das Element nicht wachsen darf. |
Beispiel mit festen Begrenzungen
Im folgenden Beispiel hat die Box minimale und maximale Breiten und Höhen.
Die rote Box kann zwischen 200 und 400 Pixel breit und zwischen 100 und 200 Pixel hoch sein.
Responsive Verwendung
In Kombination mit Prozentbreiten sind min- und max-Werte ideal für responsive Layouts.
Tipps zur Verwendung von min und max
Die Eigenschaften min und max verhindern extremes Schrumpfen oder Ausdehnen von Elementen.
- Verwende min-width auf Mobilgeräten, damit Texte nicht in zu schmale Spalten fallen.
- Mit max-width bleibt der Inhalt auch auf großen Bildschirmen gut lesbar.
- Kombiniere min- und max-Werte mit Prozentbreiten für ein perfektes responsives Ergebnis.
✨ Frag Lara — deine KI-Lernpartnerin
Entsperre personalisierte Lernunterstützung. Lara kann Lektionen erklären, Themen zusammenfassen und deine Lernfragen beantworten — verfügbar ab dem Go-Tarif.
Lara hilft dir, schneller zu lernen — exklusiv für ReadyTools Go-, Plus- und Max-Mitglieder.
Sprache wählen
Thema wählen
© 2025 ReadyTools. Alle Rechte vorbehalten.