CSS Kurs – Block- und Inline-Elemente

CSS Kurs – Block- und Inline-Elemente
5 Sterne
2 Bewertungen

Dieser Beitrag ist Teil des CSS Kurses.
Wenn Sie sich unsere Beispiel-Webseite mit Firefox anschauen, können Sie über Entwicklerwerkzeuge → 3D-Ansicht die einzelnen Elemente in 3D anschauen. In dieser Ansicht wird der Unterschied zwischen Block- und Inline-Elementen deutlich.

3D-Ansicht der HTML Elemente

Block- und Inline-Elemente

Die Block-Elemente gehen im Browserfenster von ganz links bis nach ganz rechts. Blockelemente sind zum Beispiel: div, h1, p. Sie werden so breit wie es nur geht und haben einen integrierten Zeilenumbruch. Das darauf folgende Kästchen beginnt in der nächsten Zeile.
Inline-Elemente dagegen haben keinen Zeilenumbruch. Wie Sie sehen fließt unser Text nach span, em und strong einfach weiter. Sie werden auch nur so breit wie sie sein müssen. Sie enden nach dem Text, der in dieser Kiste steckt.
Eine Übersicht über alle Block- und Inline-Elemente finden Sie auf SELFHTML.

Quellen und weiterführende Literatur:
Peter Müller (2013): Flexible Boxes

Falls Ihnen dieser Beitrag weitergeholfen hat, wäre es eine sehr nette Anerkennung meiner Arbeit wenn Sie z.B. Ihre Bücher über Amazon bestellen würden. Wenn Sie ein Produkt kaufen, erhalte ich dafür eine Provision. Für Sie ändert sich am Preis des Produktes gar nichts. Ich möchte mich an dieser Stelle jetzt schon für Ihre Unterstützung bedanken.

Denis Reis ist Business Intelligence Consultant bei Dahlbeer und gibt als Buchautor sein Wissen rund um den SAP Projektalltag weiter. Des Weiteren unterrichtet er Projektmanagement und Controlling an der Wiesbaden Business School. Der aus Düsseldorf stammende Familienmensch zählt zu denjenigen, die auf komplizierte Darstellungen verzichten und das Ganze auf den Punkt bringen.

0 Kommentare

Dein Kommentar

Want to join the discussion?
Feel free to contribute!

Kommentar verfassen