Mit CSS Darstellung und Verhalten der Elemente ändern

Die Elemente einer Website werden in die zwei Kategorien Inline- und Block-Elemente eingeteilt. Das Verhalten dieser beiden Elementtypen ist dabei unterschiedlich. Ein Block-Element nimmt beispielsweise standardmäßig die gesamte Breite ein, die zur Verfügung steht. Außerdem wird es in einer neuen Zeile platziert und das nachfolgende Element ebenfalls, sodass sie untereinander platziert werden. Bei Inline-Elementen ist das anders. Diese nehmen nur die Breite ein, die für den Inhalt notwendig ist und sie werden nebeneinander positioniert.

Es kommt immer wieder vor, dass man bei einer Website ein Inline-Element verwenden muss, jedoch das Verhalten eines Block-Elements erwünscht ist und umgekehrt. Ein typisches Beispiel sind Hyperlinks. Der klickbare Bereich ist normalerweise nur so breit, wie der Linktext. Möchte man den klickbaren Bereich auf die gesamte verfügbare Breite ausdehnen, kann man dem A-Tag, der zu den Inline-Elementen gehört, das Verhalten eines Block-Elements zuweisen. Hierfür verwendet man in den CSS-Regeln die Eigenschaft display mit dem Wert block.

Zu beachten ist hierbei, dass mit der Eigenschaft display nicht der Typ des Elements geändert wird. Ein Inline-Element bleibt ein Inline-Element und die Regel, dass man Block-Elemente nicht in Inline-Elemente platziert, gilt weiterhin. Mit display wird lediglich das Verhalten eines anderen Elementtyps zugewiesen. Die Syntax ist nachfolgend anhand eines Beispiels zu sehen.

Werte für die Eigenschaft display

Neben dem Wert block hat man bei den Werten, die man der Eigenschaft display zuweisen kann, eine große Auswahl, die nachfolgend aufgelistet sind.

none (Blendet das Element so aus, als wäre sie nicht eingefügt worden)
inline (Box eines Inline-Elements wird generiert)
block (Box eines Block-Elements wird generiert)
list-item (Box eines Block-Elements und zusätzlich ein Inline-Element für den Listenpunkt werden generiert)
inline-block (Box eines Block-Elements wird generiert, den man mit anderen Elementen umfließen lassen kann)
table (Box eines Block-Elements wird generiert, verhält sich wie eine Tabelle)
inline-table (Box eines Inline-Elements wird generiert, verhält sich wie eine Tabelle bzw. das Element <table>)
table-column (Verhält sich wie das HTML-Element <col>)
table-row (Verhält sich wie eine Tabellenzeile bzw. das HTML-Element <tr>)
table-cell (Verhält sich wie eine Tabellenzelle bzw. das HTML-Element <td>)
table-caption (Verhält sich wie das HTML-Element <caption>)
table-header-group (Verhält sich wie das HTML-Element <thead>)
table-column-group (Verhält sich wie das HTML-Element <colgroup>)
table-row-group (Verhält sich wie das HTML-Element <tbody>)
table-footer-group (Verhält sich wie das HTML-Element <tfoot>)

Ab CSS3 (z.T. experimentell)

flex (Ein Flexbox-Container als Block-Element wird generiert)
inline-flex (Ein Flexbox-Container als Inline-Element wird generiert)
grid (Ein Grid-Container als Block-Element wird generiert)
inline-grid (Ein Grid-Container als Inline-Element wird generiert)
run-in
- Verhält sich wie ein Block-Element, wenn es ein Block-Element enthält
- Verhält sich wie Inline-Element, wenn es einem Block-Element folgt
- Verhält sich wie ein Block-Element, wenn danach ein Inline-Element folgt

Beispiel mit display: block

Die Eigenschaft display wird häufig dafür verwendet, um Hyperlinks wie ein Block-Element verhalten zu lassen. Dadurch ist der klickbare Bereich nicht nur der Linktext, sondern auch der freie Platz daneben. Nachfolgend ist ein Beispielcode in CSS und HTML, aus denen der Effekt nachvollzogen werden kann.

.selektor {
display: block;
background-color: yellow;
}

<p>Absatz mit <a href="#" class="selektor">Hyperlink</a></p>

Der Effekt der Codezeilen ist auf der folgenden Abbildung deutlich zu erkennen. Obwohl der A-Tag zu den Inline-Elementen gehört, wird der Hyperlink wie bei einem Block-Element in einer neuen Zeile begonnen. Die Hintergrundfarbe nimmt die gesamte verfügbare Breite ein und man kann auch rechts neben dem Linktext auf den Hyperlink klicken.

Häufig wird auch display: none; verwendet, um gewisse Bereiche auszublenden. Das ist beispielsweise nützlich, wenn man Websites responsive erstellt und Bereiche ab einer gewissen Anzeigebreite ausgeblendet werden sollen.