CSS-Lehrbuch – Lektion 4 – Die Eigenschaft display. Unterschied zwischen div und span.

In den vorherigen Lektionen haben wir CSS über eine Datei eingebunden und ein wenig CSS-Code geschrieben, um zu sehen, wie das alles funktioniert. In dieser Lektion beschäftigen wir uns mit einer wichtigen Eigenschaft: display. Die Eigenschaft display bestimmt, wie ein Tag im HTML-Dokument dargestellt wird, ob er wie ein Inline-Text angezeigt wird oder als Block mit eigener Höhe und Breite. Fangen wir mit dem Einfachsten an: Wie Tags standardmäßig angezeigt werden. Sie werden unterschiedlich dargestellt: <div> wird als Block angezeigt, <span> als Inline-Text. Schauen wir uns an, wie Text dargestellt wird. Wir erstellen eine Testzeile und umschließen sie mit span.

display: inline

Das Tag span wird inline dargestellt, genau so wie Text dargestellt werden soll (natürlich ausgenommen japanische Schriftzeichen, die vertikal stehen). Das span-Tag hat dabei keine Höhe und Breite; man kann einem Element mit display: inline diese Werte nicht zuweisen, weil Text anhand anderer Eigenschaften gemessen wird: Schriftgröße, Schriftart, Farbe, Abstand zwischen Buchstaben, Zeilen, Wörtern, Einrückung am Zeilenanfang. Wenn Sie also Größe, Höhe, Breite oder Abstände definieren wollen, sollten Sie den nächsten Wert für display verwenden.

display: block

Der Wert block wird standardmäßig für das div-Tag verwendet. Dieser Wert erlaubt es, Breite, Höhe und Abstände zu definieren. So können wir einen Bereich auf der Webseite definieren und darin Text, Bilder oder weitere Blöcke einfügen. Wir können einem span-Tag auch display: block zuweisen; in diesem Fall (besser mit einer Klasse, z.B. <span class="block">Text</span>) erhält das Tag Breite und Höhe und verhält sich wie ein Block.

Ein weiterer Besonderheit bei display: block ist, dass der Block sich auf die maximale verfügbare Breite ausdehnt, also standardmäßig 100% Breite hat. Allerdings kann man einem Block nicht height: 100% zuweisen, also nicht 100% Höhe. Das liegt daran, dass der Block so hoch ist, wie der Inhalt es braucht; andere Höhenangaben wie zum Beispiel 800px sind möglich, aber den Block auf die volle Bildschirmhöhe auszudehnen, ist so nicht möglich. Wie man das macht, besprechen wir in späteren Artikeln.

display: inline-block

Es gibt Situationen, in denen Bilder als Blöcke mit Breite, Höhe und Abständen angezeigt werden sollen, aber nicht die volle Breite einnehmen, sondern nebeneinander laufen sollen. Dafür kann man inline-block verwenden. Dieser Wert kombiniert die Darstellung von Text und Block. display: block kann man auch normalen Blöcken zuweisen.

display: table

Der Wert table wird standardmäßig für Tabellen verwendet. Im Gegensatz zu Blöcken kann man Tabellen in der Höhe auf 100% strecken. Trotzdem werden wir künftig das Block-Layout verwenden, da Tabellen nur für tabellarische Daten genutzt werden sollen und nicht fürs Layout.

display: list-item

Bei der Darstellung mit dem Wert list-item (standardmäßig so für das <li>-Tag) wird ein Marker hinzugefügt (standardmäßig ein schwarzer Punkt).

display: none

Wenn man diesen Wert einer Klasse, einem Tag oder einer ID zuweist, dann... verschwindet das Element auf der Webseite! Seien Sie vorsichtig damit, denn man kann etwas Wichtiges entfernen und später nicht verstehen, warum das Element fehlt. Wenn ein Kunde zum Beispiel bittet, etwas von der Seite zu entfernen (z.B. ein RSS-Icon), dann können Sie das so machen:

.rss {

  display: none;

}

Natürlich ist es besser, das Element aus der Vorlage zu entfernen, damit es gar nicht erst ausgegeben wird. Aber falls es doch ausgegeben wird, kann man es so ohne großen Aufwand über CSS ausblenden.