CSS-Eigenschaft display

Display ist eine Eigenschaft von CSS. Sie wird beim Layouten von Webseiten gebraucht. Als Wert kann display mit den drei Wörtern inline, block und inline-block besetzt werden.

...
display: inline;
...

Wert inline

Wie das Wort inline schon sagt, bewegen sich die angesprochenen html-Elemente in der gleichen Linie. Sie sind somit inline. <span>-Elemente sind ein Beispiel für Elemente, die sich auf natürliche Weise inline aneinander reihen.

Wert block

Mit block können html-Elemente dazu gebracht werden, sich untereinander aufzureihen. <p>-Elemente sind ein Beispiel für Elemente, die sich auf natürliche Weise untereinander reihen.

Wert inline-block

Der Wert inline-block wird für z.B. <li>-Elemente benutzt um eine horizontale Navigation zu erstellen. inline-block bewirkt daher, dass block-Elemente in Linie stehen.

Wert none

Mit none wird ein html-Element unsichtbar. Es wird auf der Seite nicht mehr dargestellt. Und es verschwindet auch aus dem Fluss der Webseite.

Zusammenfassung

Display ist eine nützliche CSS-Eigenschaft zum Layouten von Webseiten. Neben den genannten Werten gibt es noch ein viele mehr, unter anderem flex und inline-flex. Diese zwei gehören zur CSS-Methode Flex-Box.

Unter diesem Link findet sich ein einfaches Cheatsheet zu HTML und CSS.

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.