CSS-Layout für Boxen: Die display-Eigenschaft

Mit der CSS-Eigenschaft display kann das vordefinierte Verhalten eines HTML-Elementes beeinflusst werden. Typische Werte und ihre Bedeutung sind in der folgenden Tabelle zusammengefasst:

Wert	Bedeutung
inline	Verhalten wie ein Inline-Element
block	Verhalten wie ein Block-Element
none	Das Element wird ausgeblendet.

Dabei verändert die Eigenschaft display lediglich das Boxenverhalten (Verhalten als Block-/Inlinebox), keine anderen Layouteigenschaften.

Im folgenden Beispiel werden die Auswirkungen der display-Eigenschaft vorgestellt. Mit den dort hinterlegten Regeln ändert sich das folgende Verhalten:

• Der zweite Absatz (Absatz mit der Id id1 wird ausgeblendet. Die nachfolgenden Elemente rutschen in der Darstellung deswegen nach oben. Setzen Sie testweise die display-Eigenschaft auf block, um das Standardverhalten des Absatzes zu sehen.
• Die beiden Überschriften (Elemente mit den Ids id2 und id3 werden zu Inline-Elementen, deswegen stehen sie nun in derselben Zeile. Setzen Sie testweise die display-Eigenschaft wieder auf block, um das Standardverhalten des Absatzes zu sehen.
• Das em-Element wird zu einem Blockelement, deswegen steht es in einer eigenen Zeile. Setzen Sie testweise die display-Eigenschaft wieder auf inline, um das Standardverhalten des Absatzes zu sehen.

See the Pen CSS – Display by Barbara Dörsam, HdM Stuttgart (@bdhdm) on CodePen.