Wat is het verschil tussen block en inline elementen?

Question

Accepted Answer

Elk element heeft een standaard **display**-gedrag dat bepaalt hoe het in de layout stroomt. - **Block**-elementen starten op een **nieuwe regel** en nemen de **volledige beschikbare breedte** in beslag. Ze accepteren width/height en alle marges/paddings. Voorbeelden: `

`, `

`, `
`, `
`. - Inline-elementen stromen binnen een regel, alleen zo breed als hun inhoud, en negeren width/height en boven-/ondermarge. Voorbeelden: ``, ``, ``, ``. ```html
This is a bold word inside a paragraph.

Block one

Block two
``` ## Waarom het belangrijk is ```css span { width: 200px; height: 50px; } /* ❌ ignored — span is inline / ``` Het instellen van `width`/`height` op een inline element doet niets. De oplossing is om het display ervan te wijzigen: ```css span { display: inline-block; width: 200px; } / ✅ flows inline BUT respects size / ``` ## inline-block — het beste van beide werelden `inline-block` staat in de tekststroom (naast elkaar) en* respecteert width/height/marges — ideaal voor navigatie-items, badges of buttons die in een rij zijn uitgelegd. ```text block → new line, full width, sizeable inline → in-line, content width, NOT sizeable (vertically) inline-block → in-line, content flow, sizeable ``` ## Waarom het belangrijk is Het begrijpen van standaard display verklaart waarom uw `` geen hoogte krijgt, waarom `
`s stapelen, en wanneer u naar `inline-block`, `flex` of `grid` moet schakelen. Het is de basis van hoe elementen worden gerangschikt voordat u een lay-outsysteem toepast.