CSS Grundlagen: Kleine Box, große Wirkung – Wie Display das Aussehen von HTML Elementen beeinflusst

Art der Darstellung: CSS Eigenschaft Display

Die Elemente einer Webseite lassen sich grob in zwei Haupt-Kategorien einteilen – Block-Elemente und Inline-Elemente. Block-Elemente erzeugen einen eigenen Absatz, d.h. sie erzeugen einen Zeilenumbruch vor und nach dem Element.

Die wichtigsten und meist genutzten HTML Blockelemente sind:

Überschriften   (mit den HTML <H1> bis <H6> Tags)
Absätze   (mit den HTML <P> Tag)
Listen   (mit den HTML <UL> und <OL> Tags)
HTML Tabellen   (mit den HTML-Tags <TABLE>, <TR> und <TD>)
Bereiche   (mit dem HTML <DIV> Tag)

CSS-Eigenschaft: Display

Beschreibung	mögliche Werte	Standardwert	Kategorie
Art der Darstellung	block inline inline-block table none grid flex initial inherit	inline	Bildschirm Positionierung

Die Angabe in oranger Schrift ist die Standardanwendung der CSS-Eigenschaft display.

Es gibt noch mehr Werte für display. Aus Gründen der Übersichtlichkeit gehe ich auf diese eher selten benutzten Werte an dieser Stelle nicht ein.

Mit der CSS-Eigenschaft display kann man das Verhalten eines HTML-Elements ändern. Die typische Verwendung von Display sind die Eigenschaften

• display: block
• display: inline
• display: inline-block
• display: none

Für jedes HTML-Element erzeugt der Browser eine Box und weist ihr das grundlegende Verhalten zu. Dieses Verhalten kann mit der CSS-Eigenschaft Display geändert werden.

1. Mit der Eigenschaft display lässt sich der Typ eines HTML-Elements (Block-Element oder Inline-Element) nicht ändern. Nur das Verhalten des HTML-Elements lässt sich ändern. Block-Elemente bleiben Block-Elemente und Inline-Elemente bleiben Inline-Elemente. Die Regel, dass Block-Elemente nicht in Inline-Elemente platziert werden dürfen, gilt nach wie vor.

2. Die Eigenschaft display wird verwendet, wenn für ein Inline-Element das Verhalten eines Block-Elements oder für ein Block-Element das Verhalten eines Inline-Elements benötigt wird.

3. Block-Elemente erzeugen einen eigenen Absatz. Vor und nach dem HTML-Element wird gemäß Standard ein automatischer Zeilenumbruch bzw. Zeilenvorschub (Englisch: Linefeed) eingefügt.

4. Inline-Elemente erzeugen keinen Absatz. Das bedeutet, der normale Textfluss wird nicht unterbrochen. Inline-Elemente sind nur so breit wie für den Inhalt notwendig. Sie werden gemäß Standard nebeneinander platziert.

5. Ein Element mit der Eigenschaft display: inline-block ist ein Inline-Element. Es ist aber möglich mit Margin einen Außenabstand und mit Padding einen Innenabstand zu definieren.

6. Eine für die Praxis wichtige Deklaration ist display: none. Diese Deklaration legt fest, dass für das Element keine Box erzeugt wird. Das auf diese Weise ausgeblendete Element hat keinen Einfluss auf folgende Elemente im Layout der Webseite.

   Auf diese Weise ausgeblendete Elemente können mit jedem anderen Wert für die Eigenschaft display wieder eingeblendet werden.

   Im Gegensatz zu display: none erzeugt visibility: hidden für das Element eine vollständig transparente Box. Elemente, die auf diese Weise ausgeblendet werden, haben Einfluss auf nachfolgende Elemente.

CSS-Layouts mit display, position und float

Die Eigenschaften Display, Position und Float ermöglichen es, CSS-basierte Layouts zu erstellen. In der Regel werden HTML-Elemente je nach Elementtyp untereinander (Block-Elemente) oder nebeneinander (Inline-Elemente) positioniert. Die Breite der Block-Elemente wird durch das übergeordnete Element bestimmt.

Durch gezielte Definitionen kann man die Boxen auf der Webseite beliebig ausrichten. Dazu muss für jedes Element die Standard-Ausrichtung aufgehoben und neu definiert werden.

Dieses Muster-Template demonstriert die Positionierung mit display, position und float am Beispiel eines responsiven Zwei Spalten Standard-Layouts.