Elk element heeft een standaard display-gedrag dat bepaalt hoe het in de layout stroomt.
<div>, <p>, <h1>, <section>, <ul>.<span>, <a>, <strong>, <em>.<p>This is a <strong>bold</strong> word inside a paragraph.</p>
<!-- <strong> stays inline; the two <div>s below stack vertically -->
<div>Block one</div>
<div>Block two</div>
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:
span { display: inline-block; width: 200px; } /* ✅ flows inline BUT respects size */
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.
block → new line, full width, sizeable
inline → in-line, content width, NOT sizeable (vertically)
inline-block → in-line, content flow, sizeable
Het begrijpen van standaard display verklaart waarom uw <span> geen hoogte krijgt, waarom <div>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.
Een bibliotheek met IT-sollicitatievragen met gedetailleerde antwoorden — van Junior tot Senior.
Doneren