display: Das Verhalten umschalten
Jedes Element hat ein eingebautes Standardverhalten, das Denkmodell dazu steht im HTML-Kapitel Block und Inline. Die CSS-Eigenschaft display schaltet dieses Verhalten um, und sie öffnet die Tür zu den modernen Layoutverfahren.
Die klassischen Werte
| Wert | Verhalten |
|---|---|
block | Eigene Zeile, volle Breite, Maße einstellbar. So verhalten sich p, div und Überschriften von Haus aus. |
inline | Fließt im Text mit, ignoriert width und height. Standard bei a, span, strong. |
inline-block | Der Zwitter: fließt im Text mit, lässt sich aber wie ein Block bemessen und polstern. Jahrelang das Mittel der Wahl für nebeneinanderstehende Kästen. |
none | Weg. Das Element wird nicht gerendert und belegt keinen Platz, auch für Screenreader ist es nicht mehr da. |
Beispiel: Links als Buttons aufziehen
.btn {
display: inline-block;
padding: 8px 16px;
border: 2px outset #C0C0C0;
background: #C0C0C0;
}Ein Link ist inline und würde padding oben und unten nur widerwillig mitmachen. Als inline-block wird er zur ordentlichen Schaltflächen-Box, genau so entstehen die grauen 3D-Knöpfe hierr im Wiki.
Die modernen Werte: flex und grid
display: flex und display: grid verwandeln ein Element in einen Layout-Container, der seine Kinder nach neuen Regeln anordnet: nebeneinander, verteilt, in Rastern. Das sind die beiden Werkzeuge mit denen heute Seitenlayouts gebaut werden, jedes bekommt bei uns ein eigenes Kapitel: Flexbox und Grid.
Verstecken: none ist nicht die einzige Option
Neben display: none gibt es visibility: hidden (unsichtbar, aber der Platz bleibt reserviert) und Techniken die Inhalte nur visuell verstecken, für Screenreader aber hörbar lassen, etwa für Skip-Links. Welche Variante richtig ist hängt davon ab für wen etwas verschwinden soll. Faustregel: display: none versteckt vor allen, und das ist oft mehr als gewolt.
Typische Fehler
- width an einem inline-Element setzen und sich wundern dass nichts passiert.
- Wichtige Inhalte per display: none "ausblenden" und vergessen dass sie damit auch aus der Zugänglichkeit und der Tastaturnavigation fallen.
- Mit inline-block-Ketten Layouts bauen, die längst ein Fall für Flexbox sind. Der berüchtigte Leerzeichen-Spalt zwischen inline-blocks hat genug Nerven gekostt.
Weiter im Lernpfad: position · Verwandt: Block und Inline