Die Display Eigenschaft
Die CSS-Eigenschaft DISPLAY sagt dem Browser, wie ein Element auf der Webseite angezeigt werden soll.
Man könnte auch sagen: Sie bestimmt, wie sich ein Element im Layout verhält.
Ein HTML IMG Tag (also ein Bild auf einer Webseite) hat standardmäßig folgendes Verhalten: display:inline;
Das bedeutet: Das Bild steht in einer Zeile, so wie Textzeichen.
Was geschieht, wenn die DISPLAY Eigenschaft beim Bild sich ändert?
Hier sind nun einige Varianten:
1. DISPLAY: inline; (Standard)
Das Bild steht in einer Textzeile.
Es ist nicht möglich ein Margin oder Padding oben/unten richtig anzuwenden.
Höhe und Breite können trotzdem gesetzt werden.
2. DISPLAY: block;
Das Bild wird wie ein „Block“ behandelt – nimmt die ganze Zeile ein und es beginnt auf einer neuen Zeile und alle nachfolgenden Inhalte auch.
Abstände über (margin/padding)können gut genutzt werden, z.B. oben und unten.
DISPLAY BOLCK wird oft verwendet, wenn man das Bild zentrieren oder mit Abstand versehen möchte:
3. DISPLAY: inline-block;
Eine Mischung aus beiden: Steht in einer Zeile, wie INLINE
Aber die Abstände und Größen können gut gesteuert werden, wie beiBLOCK.
DISPLAY steuert, wie ein Bild im Layout erscheint.
Für Bilder ist BLOCK oft praktischer als INLINE,
weil man dann besser Abstände und Zentrierung steuern kann.
Text daneben
Text darunter
Text daneben