Wanneer je een webpagina ontwerpt, plaats je HTML-elementen op het scherm. Maar waarom staat een <h1> altijd op een splinternieuwe regel, terwijl een <a> of <strong> netjes midden in een alinea blijft staan?
Het antwoord heeft alles te maken met de display-eigenschap in CSS. De display-eigenschap bepaalt hoe een element zich gedraagt in de zogenaamde document flow (de natuurlijke volgorde van de pagina) en hoe het reageert op afmetingen zoals breedte, hoogte en marges.
In deze les ontdek je de vier fundamentele display-waarden: block, inline, inline-block en none.
Elk HTML-element heeft van nature een standaard display-waarde vanuit de browser. Deze elementen vallen grotendeels uiteen in twee hoofdcategorieën: Block-elementen en Inline-elementen.
display: blockEen block-element gedraagt zich als een massieve bouwsteen die de volledige breedte van zijn 'parent' (bovenliggend element) opeist.
width, height, margin en padding..card {
display: block; /* Standaardgedrag voor <div>, <section>, <p>, etc. */
width: 300px;
height: 150px;
margin: 20px auto;
padding: 15px;
background-color: #f1f5f9;
}
Standaard block-elementen in HTML:
<div>,<h1>t/m<h6>,<p>,<section>,<article>,<header>,<footer>,<ul>,<li>.
display: inlineEen inline-element stroomt mee met de tekst, net zoals een individueel woord in een zin. Het neemt enkel de ruimte in die zijn inhoud (de tekst of afbeelding) daadwerkelijk nodig heeft.
width en height volledig!margin-top, margin-bottom) werken niet of vervormen de regelafstand niet zoals je verwacht..accent-tekst {
display: inline; /* Standaardgedrag voor <span>, <a>, <strong>, etc. */
color: #2563eb;
font-weight: bold;
/* width: 200px; ❌ DIT WERKT NIET op inline-elementen! */
}
Standaard inline-elementen in HTML:
<span>,<a>,<strong>,<em>,<img>(gedraagt zich als inline-replaced),<label>.
display: inline-blockWat doe je als je een knop (<a>-tag) wilt maken die netjes naast andere tekst staat, maar waar je wel een exacte breedte, hoogte en binnenruimte (padding) aan wilt meegeven?
Daarvoor gebruiken we display: inline-block: de perfecte hybride vorm tussen inline en block!
inline).width, height, margin en padding (zoals block)..btn {
display: inline-block; /* Blijft inline, maar accepteert alle block-eigenschappen! */
width: 180px;
padding: 12px 20px;
margin: 10px;
background-color: #2563eb;
color: #ffffff;
text-align: center;
text-decoration: none;
border-radius: 6px;
}
Wanneer gebruik je dit?
Ideaal voor het vormgeven van actieknoppen, navigatiemenu-items, afbeeldingskaarten naast elkaar of formuliervelden.
display: noneMet display: none haal je een element volledig weg uit de weergave van de pagina. Het element wordt niet alleen onzichtbaar, maar verliest ook zijn plek in de documentstroom. Het neemt dus $0\text{px}$ ruimte in, alsof de HTML-code er nooit gestaan heeft.
.foutmelding {
display: none; /* Het element is compleet verdwenen en neemt geen ruimte in */
}
display: none vs. visibility: hidden| Eigenschap | Zichtbaarheid | Plek in de lay-out (Ruimte-inname) |
|---|---|---|
display: none; | Onzichtbaar | Verdwijnt volledig. Andere elementen schuiven op. |
visibility: hidden; | Onzichtbaar | Blijft ruimte innemen. Er ontstaat een 'gat' op de pagina. |
| Display Type | Nieuwe regel? | Gehoorzaamt aan width/height? | Gehoorzaamt aan margin/padding? | Veelgebruikte toepassing |
|---|---|---|---|---|
block | Ja | Ja | Ja (Volledig) | Structuurblokken, alinea's, koppen |
inline | Nee | Nee | Enkel horizontaal | Tekstaccenten, losse links in tekst |
inline-block | Nee | Ja | Ja (Volledig) | Knoppen, navigatielinks, kaarten |
none | N.v.t. | N.v.t. | N.v.t. | Verbergen van interactieve elementen |
In onderstaand voorbeeld zie je hoe een navigatiebalk met knoppen en een verborgen melding opgebouwd worden met de verschillende display-eigenschappen:
index.html)<nav class="navigatie">
<span class="logo">Studio Viso</span>
<a href="#" class="nav-item">Home</a>
<a href="#" class="nav-item">Projecten</a>
<a href="#" class="nav-item btn-accent">Contact</a>
</nav>
<div class="melding-box">
<p>Dit is een belangrijke mededeling!</p>
</div>
<!-- Verborgen melding -->
<div class="foutmelding">
<p>Er is een netwerkfout opgetreden.</p>
</div>
style.css)/* Algemene stijl */
body {
font-family: Arial, sans-serif;
background-color: #f8fafc;
margin: 0;
padding: 20px;
}
/* 1. BLOCK: De navigatiebalk is een block dat de volle breedte inneemt */
.navigatie {
display: block;
background-color: #0f172a;
padding: 16px 24px;
border-radius: 8px;
}
/* 2. INLINE: Het logo blijft op dezelfde regel als de links */
.logo {
display: inline;
color: #ffffff;
font-weight: bold;
font-size: 1.2rem;
margin-right: 20px;
}
/* 3. INLINE-BLOCK: Knoppen staan naast elkaar, maar hebben eigen dimensions & padding */
.nav-item {
display: inline-block;
color: #94a3b8;
text-decoration: none;
padding: 8px 16px;
margin-right: 8px;
border-radius: 4px;
transition: background-color 0.2s;
}
.nav-item:hover {
background-color: #1e293b;
color: #ffffff;
}
.btn-accent {
background-color: #2563eb;
color: #ffffff;
}
.btn-accent:hover {
background-color: #1d4ed8;
}
/* BLOCK: De melding-box neemt een eigen regel en volledige breedte onder de nav */
.melding-box {
display: block;
margin-top: 20px;
padding: 16px;
background-color: #e0f2fe;
border-left: 4px solid #0284c7;
}
/* 4. NONE: De foutmelding is standaard onzichtbaar en neemt geen ruimte in */
.foutmelding {
display: none;
margin-top: 20px;
padding: 16px;
background-color: #fee2e2;
border-left: 4px solid #dc2626;
}
display verander je het standaardgedrag van een HTML-element.block: Dwingt een nieuwe regel af en neemt $100\%$ breedte in. Accepteert alle afmetingen (width, height, margin, padding).inline: Blijft op dezelfde regel staan en neemt enkel de breedte van de inhoud in. Negeert width en height.inline-block: Blijft op dezelfde regel én luistert wel naar width, height, margin en padding.display: none: Verbergt het element volledig, inclusief de ingenomen ruimte in de lay-out.