Display & <span>

Wat ga je leren?

Je leert hoe HTML-elementen standaard ofwel onder elkaar staan (block) ofwel naast elkaar (inline), hoe je dat met display aanpast, en hoe je <span> gebruikt om kleine stukjes tekst te stijlen.

Theorie

Elk HTML-element heeft een standaard display-type. Dat bepaalt hoe het element zich gedraagt op de pagina.

Block vs inline

Type	Gedrag	Voorbeelden
block	Begint op nieuwe regel, vult volledige breedte	<p>, <h1>, <div>, <section>
inline	Blijft in de tekst-stroom, breedte = inhoud	<a>, <b>, <i>, <span>
inline-block	In de tekst-stroom, maar width en height werken wel	(zelf instellen)

Je verandert dit met de CSS-eigenschap display:

.menu a {
  display: inline-block;  /* a normaal inline, maar nu mét padding/breedte */
  padding: 8px 16px;
}

Wanneer gebruik je <span>?

<span> is het inline-tegendeel van <div>. Gebruik hem als je een klein stukje tekst binnen een paragraaf wilt stijlen zonder een nieuwe regel te beginnen:

<p>Dit is <span class="highlight">een gemarkeerd</span> woord.</p>

.highlight {
  background-color: yellow;
  color: red;
}

Vuistregel:

• <div> voor blokken (rondom meerdere elementen)
• <span> voor tekst-stukjes binnen een regel

Predict

Wat denk je dat er gebeurt als je display: block op een <span> zet?

Klik hier voor het antwoord

De <span> gaat zich gedragen als een blok — hij begint op een nieuwe regel en vult de hele breedte. Het uiterlijk verandert dus, maar de tag (<span>) blijft hetzelfde. display overschrijft het standaardgedrag.

Probeer het zelf!

Editor laden...

Investigate

Experimenteer:

• Verander display: inline-block op .knop naar display: block — wat verandert er aan de knoppen?
• Verwijder display: inline-block helemaal (laat de rest staan) — werkt padding nog goed?
• Voeg display: block toe aan .highlight — wat gebeurt er met de gemarkeerde tekst?
• Vergelijk <div> met <span> rondom hetzelfde stukje tekst — welke verschilt?

Modify

Opdracht: Maak in een paragraaf drie verschillende stukjes tekst gekleurd door ze in <span> te zetten met een eigen klasse: één rood, één blauw, één met gele achtergrond.

Tip

Drie <span>'s met drie verschillende klasses. In CSS drie aparte regels (.rood, .blauw, .geel).

Antwoord

<p>
  Een <span class="rood">rood woord</span>,
  een <span class="blauw">blauw woord</span>,
  en een <span class="geel">gele markering</span>.
</p>

.rood { color: red; }
.blauw { color: blue; }
.geel { background-color: yellow; }

Make

Opdracht: Bouw een navigatiebalk waarin de links náást elkaar staan met padding eromheen (alsof het knoppen zijn). Gebruik geen Flexbox — alleen display: inline-block.

Tip

<a> is standaard inline, maar dan werkt padding/width niet goed. Zet display: inline-block op de links zodat ze beide eigenschappen krijgen.

Antwoord

<div class="nav">
  <a href="#">Home</a>
  <a href="#">Over</a>
  <a href="#">Contact</a>
</div>

.nav a {
  display: inline-block;
  padding: 10px 20px;
  background-color: #4a90e2;
  color: white;
  text-decoration: none;
  margin-right: 4px;
}

.nav a:hover {
  background-color: #357ab8;
}

Er gaat iets mis

Padding op een inline-element werkt half

<a href="#" style="padding: 20px; background: yellow;">Klik</a>
<a href="#" style="padding: 20px; background: yellow;">Klik</a>

Een gewone <a> is inline. padding lijkt te werken (er komt ruimte rond de tekst), maar de elementen overlappen elkaar verticaal — padding-top duwt andere regels niet weg. Ook werkt width/height niet. Oplossing: zet display: inline-block op de links.

a {
  display: inline-block;
  padding: 20px;
}

---

← Eenheden in CSS | Position →