Das Property Display

(Auszug aus "XML in a Nutshell" von Elliotte Rusty Harold & W. Scott Means)

Display ist eines der wichtigsten CSS-Properties. Dieses Property bestimmt, wie das Element auf der Seite angeordnet wird. Für dieses Property gibt es 18 zulässige Werte. Die zwei primären Werte sind jedoch inline und block. Das Display-Property kann auch verwendet werden, um Listen und Tabellen zu erzeugen oder um Elemente vollständig auszublenden.

Inline-Elemente

Wird Display auf inline, den vorgegebenen Wert, gesetzt, erscheint das Element an der nächsten verfügbaren Position von links nach rechts, etwa so, wie die Wörter in diesem Absatz angeordnet werden (die genaue Richtung kann sich für Sprachen, die wie Hebräisch von rechts nach links oder wie traditionelles Chinesisch von oben nach unten verlaufen, noch ändern). Der Text kann, falls es notwendig ist, von einer Zeile zur nächsten umbrochen werden, aber es werden zwischen die einzelnen Inline-Elemente keine harten Zeilen umbrüche eingefügt. In den Code-Beispielen Marjorie Andersons Rezept für Southern Corn Bread und Ein CSS-Stylesheet für Rezepte wurden die Elemente menge, schritt, person, stadt und staat inline formatiert. Dieses Format musste nicht explizit angegeben werden, da es der Standardwert ist.

Blockelemente

Im Gegensatz zu Inline-Elementen wird ein Element, für das display: block eingestellt ist, von seinen Geschwistern getrennt. Im Allgemeinen erfolgt dies durch einen Zeilenumbruch. In HTML sind zum Beispiel Absätze und Überschriften Blockelemente. In den oben genannten Code-Beispielen wurden die Elemente gericht, anweisungen und geschichte mit display: block formatiert.

CSS 2.1 fügt einen Inline-Block-Wert hinzu, der den Inhalt des Elements so formatiert, als wäre es ein Block-Element, das Element selbst aber so formatiert, als wäre es ein Inline-Element. Normalerweise heißt das einfach, dass es um den Elementinhalt zusätzlichen Rand und Padding gibt, dass vor und hinter dem Element aber keine Zeilenumbrüche folgen.

Listenelemente

Ein Element, dessen display-Property auf list-item gesetzt ist, wird ebenfalls als Blockelement formatiert. Am Anfang des Blocks wird allerdings noch ein Anstrich (Bullet) eingefügt. Die Properties list-style-type, list-style-image und list-style-position kontrollieren, welches Zeichen oder Bild für den Anstrich verwendet und wie die Liste eingerückt wird. Zum Beispiel würde diese Regel die Schritte als nummerierte Liste formatieren, anstatt sie nur als einfachen Absatz darzustellen:

Verborgene Elemente

Ein Element, dessen display-Property auf none gesetzt ist, wird nicht in das aufbereitete Dokument eingesetzt, das der Leser sieht. Es ist unsichtbar, nimmt keinen Platz weg und beeinflusst die Platzierung der anderen Elemente nicht. Zum Beispiel blendet diese Regel das Element geschichte vollständig aus:

 
geschichte {display: none}
 

Tabellenelemente

Es gibt zehn display-Werte, die Elemente als Bestandteile einer Tabelle kennzeichnen. Es sind:

• table
• inline-table
• table-row-group
• table-header-group
• table-footer-group
• table-row
• table-column-group
• table-column
• table-cell
• table-caption

Diese Werte haben auf Grund ihrer Analogie zu HTML 4.0-Tabellen-Tags offensichtliche Bedeutungen. Sie sollten konsistent zueinander und zu anderen Elementen im Dokument verwendet werden. Zum Beispiel sollte ein Element, das als Tabellenzeilen-Element (table-row-Element) formatiert ist, ein Elternelement besitzen, das als Tabelle (table) formatiert ist, und Kindelemente, die als Tabellenzellen (table-cell) formatiert sind. Diese drei Regeln beispielsweise formatieren die Zutaten als einfache Tabelle: