CSS-Anzeigeeigenschaften: block, inline und inline-block – & wie man den Unterschied erkennt
Webbrowser behandeln jedes Element als eine Art Box. In CSS gibt es jedoch zwei verschiedene Arten von Boxen – block und inline.
Ein block-Element beginnt immer in einer neuen Zeile und füllt den horizontalen Raum links und rechts auf der Webseite aus. Sie können an allen vier Seiten eines Blockelements Ränder und Polsterungen hinzufügen – oben, rechts, links und unten.
Ein paar Beispiele für Blockelemente sind <div> und <p> Tags. Wie unten gezeigt, habe ich auch grüne Polsterung auf allen vier Seiten jedes Blockelements hinzugefügt.
Inline-Elemente
Inline-Elemente beginnen nicht in einer neuen Zeile, sie erscheinen in der gleichen Zeile wie der Inhalt und die Tags daneben. Einige Beispiele für Inline-Elemente sind <span><strong>, und <img> Tags.
Wenn es um Ränder und Auffüllungen geht, behandeln die Browser Inline-Elemente unterschiedlich. Sie können links und rechts an einem Inline-Element Platz hinzufügen, aber Sie können nicht die Höhe des oberen oder unteren Paddings oder Rands eines Inline-Elements hinzufügen.
Inline-Elemente können tatsächlich innerhalb von Block-Elementen erscheinen, wie unten gezeigt. Ich habe weißen Padding auf der linken und rechten Seite jedes Inline-Elements hinzugefügt.
Inline-Block
Inline-Block-Elemente sind ähnlich wie Inline-Elemente, mit dem Unterschied, dass sie an allen vier Seiten mit Padding und Margins versehen werden können. Sie müssen display: inline-block in Ihrem CSS-Code deklarieren.
Eine häufige Anwendung für die Verwendung von inline-block ist die Erstellung von horizontalen Navigationslinks, wie unten gezeigt. Ich habe ein horizontales Navigationsmenü mit einer orangefarbenen Hintergrundfarbe erstellt.
Es gibt auch noch viele andere Anzeigeeigenschaften, die Sie in den MDN-Dokumenten nachlesen können.
-D.