Display & <span>

Wat ga je leren?

Sommige elementen staan onder elkaar (block), andere blijven in de tekstregel staan (inline). Je verandert dat met display, en gebruikt <span> om een klein stukje tekst apart op te maken.

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:

.menulink {
  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.

Editor laden...

Tip

Drie <span>'s met drie verschillende klassen. 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 daarvoor display: inline-block.

Editor laden...

Tip

<a> is standaard inline, maar dan werkt padding/width niet goed. Geef de links een eigen klasse en zet daar display: inline-block op, zodat ze beide eigenschappen krijgen.

Antwoord

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

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

Er gaat iets mis

Padding op een inline-element werkt half

.knop {
  padding: 20px;
  background-color: yellow;
}

Een gewone <a> is inline. padding lijkt te werken, want er komt ruimte rond de tekst, maar die ruimte duwt de regels erboven en eronder niet weg. Twee van zulke links op opeenvolgende regels gaan daardoor over elkaar heen. Ook width en height doen niets. De oplossing staat in deze les:

.knop {
  display: inline-block;
  padding: 20px;
  background-color: yellow;
}