CSS Display (Darstellung)
Die display-Eigenschaft bestimmt, wie ein Element im Dokument angezeigt wird. Sie beeinflusst grundlegend das Layout der Seite und das Verhalten der Elemente.
Grundwerte von display
Die wichtigsten Werte von display sind: block, inline, inline-block, flex, grid und none. Jeder beeinflusst das Layout eines Elements auf unterschiedliche Weise.
| Wert | Effekt |
|---|---|
| block | Wird als Blockelement angezeigt und beginnt in einer neuen Zeile. |
| inline | Wird innerhalb der Zeile angezeigt und bricht die Zeile nicht um. |
| inline-block | Wird innerhalb der Zeile angezeigt, verhält sich aber wie ein Block. |
| flex | Erzeugt ein flexibles Layout für die Kindelemente. |
| grid | Erzeugt ein Rasterlayout. |
| none | Das Element wird nicht im Dokument angezeigt. |
Beispiele für Block, Inline und Inline-Block
Im folgenden Beispiel verwenden wir drei verschiedene display-Werte, um die Unterschiede zu demonstrieren.
Das Blockelement beginnt in einer neuen Zeile, das Inline-Element bleibt in derselben Zeile, und das Inline-Block-Element kombiniert beide Eigenschaften.
Grundlagen von Flexbox
Mit dem flex-Layout können Kindelemente flexibel verteilt, skaliert und ausgerichtet werden.
Tipps zur Verwendung von display
Die richtige Wahl des display-Werts ist entscheidend für ein gutes Layout.
- Verwende flex oder grid für komplexere Layouts.
- Inline-block ist nützlich, wenn du mehrere Elemente in einer Zeile anordnen möchtest.
- display: none entfernt das Element vollständig aus der visuellen Darstellung, bleibt aber im DOM.
✨ 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.