10 – Block vs. Inline 🧱↔️🔤

Verstehe, wie HTML-Elemente sich im Layout verhalten

🧱↔️ 1. Was bedeutet „Block“ und „Inline“?

Stell dir vor, du baust mit Legosteinen und schreibst gleichzeitig einen Brief:

Block-Elemente sind wie Legosteine:
Sie stapeln sich untereinander, nehmen die ganze Breite ein und bilden das Gerüst.
Inline-Elemente sind wie Wörter im Brief:
Sie fließen nebeneinander im Text, ohne Zeilenumbruch.

Diese Unterscheidung ist die Grundlage aller Layouts im Web. Wenn du sie verstehst, kannst du vorhersagen, wie Elemente auf der Seite angeordnet werden.

📚 Vertiefung auf W3Schools – Display Property

W3Schools erklärt alle Werte von display – von block bis flex.

🔗 W3Schools: CSS Display

🧱 2. Block-Elemente – die „Stapelbausteine“

Block-Elemente:

Beginnen immer in einer neuen Zeile
Nehmen standardmäßig 100 % der Breite des Elternelements ein
Respektieren width, height, padding, margin

Häufige Block-Elemente:

<div>, <p>, <h1>–<h6>
<ul>, <ol>, <li>
<section>, <article>, <header>, <footer>
<form>, <table>

💡 Merke: Block-Elemente sind wie Bausteine – sie bauen das Gerüst deiner Seite.

🧱+🧠 2b. Semantische Block-Elemente – Struktur mit Bedeutung

Während <div> ein generischer Container ist, bieten semantische Elemente inhaltliche Bedeutung – sowohl für Menschen als auch für Maschinen.

Element	Bedeutung	Wann verwenden?
`<header>`	Einführender Bereich (Seite oder Abschnitt)	Logo, Navigation, Titel
`<nav>`	Hauptnavigation	Liste von Links zur Seitennavigation
`<main>`	Hauptinhalt der Seite	Einmal pro Seite – der zentrale Inhalt
`<section>`	Thematischer Abschnitt	Mit eigener Überschrift (z. B. Kapitel)
`<article>`	Selbstständiger Inhalt	Blog-Post, Nachricht, Kommentar
`<aside>`	Nebeninhalt	Werbung, Zitate, zusätzliche Infos
`<footer>`	Abschließender Bereich	Copyright, Kontakt, Meta-Links

💡 Merke:
- Verwende semantische Elemente zuerst – <div> nur als letzte Wahl.
- Screenreader und Suchmaschinen verstehen die Struktur – das macht deine Seite barrierefrei und SEO-freundlich.

🔤 3. Inline-Elemente – die „Textbegleiter“

Inline-Elemente:

Fließen im laufenden Text
Nehmen nur so viel Platz, wie ihr Inhalt benötigt
Ignorieren width und height
Respektieren nur horizontales padding und margin

Häufige Inline-Elemente:

<span>, <a>, <strong>, <em>
<img> (leer, aber inline!)
<input>, <label> (Formular-Elemente)

⚠️ Achtung: Du kannst kein Block-Element (z. B. <div>) in ein Inline-Element (z. B. <span>) einbetten – das ist ungültiges HTML!

🧱+🔤 4. `display: inline-block` – das Beste aus beiden Welten

Manchmal brauchst du ein Element, das:

im Text fließt (wie inline),
aber Breite, Höhe, Padding und Margin akzeptiert (wie block).

Dafür gibt es display: inline-block:

.icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(icon.svg);
  vertical-align: middle;
}

Typische Anwendung: Icons neben Text, kleine Karten in einer Zeile, Navigationselemente.

👁️ 5. Ausblenden: `display: none` vs. `visibility: hidden`

Eigenschaft	`display: none`	`visibility: hidden`
Sichtbar?	Nein	Nein
Platz im Layout?	Nein – Element verschwindet komplett	Ja – Platz bleibt reserviert
Barrierefreiheit	Screenreader ignorieren es	Screenreader lesen es trotzdem

💡 Merke:
- Für Layout-Umschaltungen (z. B. Mobile ↔ Desktop): display: none
- Für temporäres Ausblenden (z. B. Loading-Text): visibility: hidden

🔗 6. Verbindung zu Flexbox & modernem Layout

Sobald du ein Element mit display: flex versiehst, ändern sich die Regeln:

Das Element selbst wird zum Flex-Container (blockartig)
Alle direkten Kinder werden zu Flex-Items – unabhängig davon, ob sie vorher block oder inline waren!

Das ist der Grund, warum Flexbox so mächtig ist: Es hebt die alten Block/Inline-Regeln auf und gibt dir volle Kontrolle über Ausrichtung und Abstände.

💡 Vorbereitung auf Kapitel 11:
In der nächsten Lektion wirst du lernen, wie du mit Flexbox Layouts baust, die auf allen Geräten perfekt aussehen.

🧠 7. KI als Lernpartner – guter Prompt

❌ Schlecht: „Erkläre Block und Inline.“ ✅ Gut: „Erkläre mir den Unterschied zwischen Block- und Inline-Elementen – und zeig mir, wie ich mit display: inline-block kleine Karten nebeneinander anordne. Außerdem: Warum kann ich kein <div> in einen <span> einbetten?“