Block oder Inline?
Zwei Prinzipien der Darstellung
Die Facts dieser Seite kannst relativ lange ignorieren. Irgendwann wirst du aber merken, dass gewisse CSS-Anweisung wie height oder margin keine Auswirkung auf Inline-Tags haben. Dann bist du bereit, das Wissen auf dieser Seite zu lernen.
Block-Tags
- Die Darstellung eines Block-Tag beginnt immer auf einer neuen Zeile.
- Auch das nachfolgende Element wird auf eine neue Zeile gedrückt (unterhalb des Blockes).
- Ein solcher Block nimmt immer die gesamte verfügbare Breite ein (100% der Breite).
- Ein Block-Tag hat einen oberen und einen unteren Abstand (margin), der mit CSS definiert werden kann.
Beispiele von Block-Tags, die auf dieser Website behandelt werden:
<div>, <footer>, <h1> bis <h6>, <header>, <main>, <nav>, <ol> und <ul>, <p>, <video>
Inline-Tags
- Ein Inline-Tags beginnt nicht in einer neuen Zeile.
- Ein Inline-Tag nimmt nur so viel Breite wie nötig in Anspruch.
- Ein Inline-Tag hat keinen oberen und unteren Abstand (margin).
- Ein Inline-Tag verhält sich im Prinzip so wie ein Buchstabe oder ein Wort in einem Text.
Beispiele von Inline-Tags, die auf dieser Website behandelt werden:
<a>, <br>, <img>, <strong>
Das Grundverhalten von Tags ändern
Selbstverständlich kann man das Grundverhalten mit etwas CSS-Genmanipulation verändern:
-
display: inline;ein Block-Element wird zum Inline-Element -
display: block;ein Inline-Element wird zum Block-Element -
display: inline-block;Ein Element bekommt die Eigenschaften eines Blocks, wird aber trotzdem inline dargestellt.