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 en onderzoek

Probeer eerst zelf, klap dan het antwoord uit.

1. Verander display: inline-block op .knop in display: block. Wat verandert er aan de knoppen?
   Antwoord

   Elke knop staat op een eigen regel en is zo breed als het voorbeeld. Een blok begint op een nieuwe regel en vult de hele breedte.
2. Verwijder display: inline-block uit .knop en laat de rest staan. Wat gebeurt er met het blauwe vlak van de knoppen, en met hun plek ten opzichte van het lichtblauwe vak?
   Antwoord

   Het blauwe vlak blijft even groot, maar de knoppen schuiven omhoog en raken het lichtblauwe vak. Bij een inline-element telt padding boven en onder niet mee voor de plek op de regel, ook al zie je hem wel.
3. Voeg display: block toe aan .highlight. Wat gebeurt er met de gemarkeerde tekst?
   Antwoord

   Die krijgt een eigen regel midden in de alinea, met een geel vlak over de hele breedte. Het woord Een staat erboven en de rest van de zin eronder.
4. Maak van <div class="kader"> een <span class="kader">, en verander ook de afsluitende </div> in </span>. Wat verandert er?
   Antwoord

   Het lichtblauwe vak is nu zo breed als de tekst, en de eerste knop staat ernaast op dezelfde regel. Een span is inline en neemt alleen de ruimte van zijn inhoud; een div begint altijd op een nieuwe regel.

Editor laden...

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;
}