Normaler Fluss und Block-Elemente

Bisher hast du gestaltet, wie Elemente aussehen: ihre Farben, Schriften und Boxen. In dieser Lektion lernst du, wie der Browser entscheidet, wo er sie auf der Seite platziert, und wie du das mit den Eigenschaften display und position änderst.

Wenn wir nichts anderes sagen, platziert der Browser die Elemente nacheinander auf der Seite, in derselben Reihenfolge wie im HTML. Das nennt man den normalen Fluss (normal flow). Im normalen Fluss verhalten sich Elemente auf zwei Hauptarten:

• Block-Elemente beginnen in einer neuen Zeile und stapeln sich von oben nach unten. Wenn wir ihre Breite nicht festlegen, sind sie so breit wie ihr Elternelement. Überschriften, Absätze, div, ul, li, nav, main und section sind Block-Elemente.
• Inline-Elemente werden in eine Textzeile gesetzt, eins nach dem anderen von links nach rechts, genau wie Wörter. Wenn eine Zeile voll ist, geht es in der nächsten weiter. Beispiele sind strong, em, Links (a) und Bilder (img).

Ob ein Element ein Block- oder ein Inline-Element ist, legt die Eigenschaft display fest. Jedes Element hat einen Standardwert: Absätze haben block, strong hat inline. In einer Regel können wir ihn ändern, zum Beispiel:

strong {
	display: block;
}

Mit dieser Regel würde jedes strong-Element in einer neuen Zeile beginnen und so breit sein wie sein Elternelement, genau wie ein Absatz.

Im Editor findest du die Katzenseite mit einem neuen Stylesheet, das nur verwendet, was du schon kennst. Oben haben wir eine Navigation hinzugefügt: eine Liste mit Links zu den Abschnitten der Seite. Im ersten Absatz steht ein Foto von Katzen.