Display-Typen

Mit der CSS-Eigenschaft display legst du fest, wie ein Element im Layout dargestellt wird. Sie bestimmt, ob ein Element die ganze Zeile einnimmt, im Textfluss steht oder komplett ausgeblendet wird.

Viele HTML-Elemente haben bereits einen Standard-display-Wert – zum Beispiel sind <p> und <div> standardmäßig block, während <span> und <a> standardmäßig inline sind. Mit CSS kannst du dieses Verhalten gezielt ändern.

display: block

display: block ist der Standard für viele Block-Elemente. Ein Block-Element beginnt in einer neuen Zeile und nimmt standardmäßig die gesamte verfügbare Breite ein.

Du kannst width, height, margin und padding auf allen Seiten setzen. Block-Elemente eignen sich gut für Abschnitte, Karten oder Container.

1.box {
2    display: block;
3}

display: inline

display: inline ist der Standard für Inline-Elemente. Sie stehen im Textfluss nebeneinander und nehmen nur so viel Platz ein, wie ihr Inhalt benötigt.

Wichtig: Bei Inline-Elementen greifen width und height in der Regel nicht. Vertikales margin und padding verändern den Zeilenabstand oft nicht wie bei Block-Elementen.

1span {
2    display: inline;
3}

display: inline-block

display: inline-block kombiniert beide Welten: Die Elemente stehen nebeneinander wie Inline-Elemente, akzeptieren aber width, height und Abstände wie Block-Elemente.

Das ist praktisch für Buttons, Tags oder kleine Kacheln, die in einer Zeile stehen sollen, aber eine feste Größe haben dürfen.

1.box {
2    display: inline-block;
3    width: 120px;
4    padding: 8px 16px;
5}

display: flex

Mit display: flex wird ein Element zum Flex-Container. Die direkten Kindelemente werden zu Flex-Items und lassen sich in einer Zeile oder Spalte anordnen, ausrichten und verteilen.

Flexbox eignet sich besonders für Layouts in einer Richtung – zum Beispiel Navigationen, Button-Leisten oder gleich hohe Spalten.

1.container {
2    display: flex;
3    gap: 8px;
4}

Flexbox ist ein eigenes Thema mit vielen Eigenschaften wie justify-content, align-items und flex-wrap. Die ausführliche Behandlung findest du im Kapitel Flexbox weiter unten im Kurs.

display: grid

Mit display: grid wird ein Element zum Grid-Container. Du definierst ein Raster aus Zeilen und Spalten – die direkten Kinder werden automatisch in dieses Raster eingefügt.

Grid ist ein zweidimensionales Layout-System. Damit planst du Zeilen und Spalten gleichzeitig – ideal für Seitenlayouts, Dashboards oder komplexe Bereiche.

1.container {
2    display: grid;
3    grid-template-columns: 1fr 1fr 1fr;
4    gap: 8px;
5}

Grid wird im Kurs ausführlich behandelt – beginnend mit dem Kapitel Einführung Grid Layout.

display: none

display: none blendet ein Element vollständig aus. Es nimmt keinen Platz im Layout ein und ist für Screenreader und die visuelle Darstellung nicht sichtbar.

Das unterscheidet sich von visibility: hidden: Dort bleibt der Platz im Layout erhalten, nur der Inhalt ist unsichtbar.

1.hidden {
2    display: none;
3}

display: none nutzt du oft für mobile Menüs, modale Dialoge oder Inhalte, die nur unter bestimmten Bedingungen erscheinen sollen.

display: contents

display: contents lässt das Element selbst im Layout verschwinden – nur die Kindelemente bleiben sichtbar und werden so behandelt, als wären sie direkte Kinder des Eltern-Elements.

Der Container erzeugt keine eigene Box mehr. Das ist nützlich, wenn ein Wrapper-Element nur für semantisches HTML oder JavaScript da ist, aber das Layout nicht stören soll.

1.wrapper {
2    display: contents;
3}

Achtung: Bei display: contents werden Stile am Container (z. B. Hintergrund oder Rahmen) nicht mehr angezeigt, weil die Box entfernt wird.

display: list-item

display: list-item verhält sich wie ein Listeneintrag. Das Element bekommt einen Aufzählungspunkt oder eine Nummer – je nachdem, ob es in einer <ul> oder <ol> steht.

So kannst du auch anderen Elementen das Aussehen einer Liste geben, ohne zwingend ein <li> zu verwenden.

1li,
2.custom-list-item {
3    display: list-item;
4}

display: table

Mit den table-Display-Werten kannst du das Verhalten von HTML-Tabellen nachbilden – auch ohne <table>. Das war früher ein gängiger Weg für Layouts, heute setzt du dafür eher Flexbox oder Grid ein.

Die wichtigsten Werte sind:

• display: table – entspricht <table>
• display: table-row – entspricht <tr>
• display: table-cell – entspricht <td>

1.table {
2    display: table;
3}
4
5.row {
6    display: table-row;
7}
8
9.cell {
10    display: table-cell;
11}

Für echte Tabellendaten solltest du weiterhin semantische HTML-Tabellen verwenden. Die CSS-Table-Display-Werte sind heute vor allem noch für Spezialfälle relevant.