Was ist der Unterschied zwischen Block- und Inline-Elementen?

Question

Accepted Answer

Jedes Element hat ein standardmäßiges **display**-Verhalten, das steuert, wie es im Layout angeordnet wird. - **Block**-Elemente beginnen auf einer **neuen Zeile** und nehmen die **gesamte verfügbare Breite** ein. Sie akzeptieren Breite/Höhe und alle Abstände/Polsterungen. Beispiele: `

`, `

`, `
`, `
`. - Inline-Elemente fließen innerhalb einer Zeile, nur so breit wie ihr Inhalt, und ignorieren Breite/Höhe und obere/untere Abstände. Beispiele: ``, ``, ``, ``. ```html
This is a bold word inside a paragraph.

Block one

Block two
``` ## Ein praktisches Problem ```css span { width: 200px; height: 50px; } /* ❌ ignored — span is inline / ``` Das Setzen von `width`/`height` auf ein Inline-Element hat keine Wirkung. Die Lösung ist, sein display zu ändern: ```css span { display: inline-block; width: 200px; } / ✅ flows inline BUT respects size / ``` ## inline-block — das Beste aus beiden Welten `inline-block` sitzt im Textfluss (nebeneinander) und* berücksichtigt width/height/margins – perfekt für Navigationselemente, Badges oder Schaltflächen, die in einer Reihe angeordnet sind. ```text block → new line, full width, sizeable inline → in-line, content width, NOT sizeable (vertically) inline-block → in-line, content flow, sizeable ``` ## Warum es wichtig ist Das Verständnis des standardmäßigen display erklärt, warum dein `` keine Höhe annimmt, warum `
`s sich stapeln, und wann du zu `inline-block`, `flex` oder `grid` wechseln solltest. Es ist die Grundlage, wie Elemente angeordnet werden, bevor du ein Layout-System anwendest.