CSS-handleiding - Les 4 - De eigenschap display. Het verschil tussen div en span.
In de vorige lessen hebben we CSS gekoppeld via een bestand en wat CSS-code geschreven om te zien hoe het werkt. In deze les gaan we in op een belangrijk eigenschap: display.
De eigenschap display bepaalt hoe een HTML-element wordt weergegeven — of het zich als inline tekst gedraagt of als een blok met eigen hoogte en breedte.
Laten we beginnen met het eenvoudigste: hoe elementen standaard worden weergegeven. <div> wordt standaard weergegeven als een blok, terwijl <span> inline (in de tekstlijn) verschijnt.
We beginnen met een voorbeeld van inline tekst: we maken een testzin en plaatsen die in een span.
display: inline
Het span-element wordt inline weergegeven, zoals tekst hoort te worden weergegeven (behalve bij talen die verticaal schrijven, zoals Japans).
Een span heeft geen eigen hoogte of breedte — deze eigenschappen kun je niet instellen bij elementen met display: inline, omdat tekst wordt gemeten in andere eenheden zoals lettergrootte, lettertype, kleur, afstand tussen letters, regels, woorden en marges.
Als je een element echter een vaste hoogte, breedte of marges wilt geven, moet je een ander display-type gebruiken.
display: block
De waarde block wordt standaard gebruikt voor het div-element.
Met deze waarde kun je zowel de hoogte als de breedte instellen en marges toevoegen rond het blok.
Zo kun je een specifieke sectie op de website definiëren en daarin tekst, afbeeldingen of zelfs andere blokken plaatsen.
Je kunt ook een span-element het gedrag van een blok geven door het de eigenschap display: block te geven, bijvoorbeeld <span class="block">tekst</span>.
Zo krijgt het element een breedte en hoogte en gedraagt het zich als een blok.
Een ander kenmerk van display: block is dat een blok standaard de volledige beschikbare breedte inneemt (100%).
Je kunt echter geen height: 100% gebruiken om het de volledige hoogte van de pagina te geven.
Een blok neemt automatisch zoveel hoogte in als de inhoud vereist; je kunt de hoogte wel in pixels instellen (bijvoorbeeld 800px), maar niet automatisch over het hele scherm verdelen.
Hoe je dit toch kunt bereiken, bespreken we in volgende lessen.
display: inline-block
Soms willen we dat afbeeldingen of elementen zich gedragen als blokken (met hoogte, breedte en marges), maar zonder de volledige breedte in te nemen.
Daarvoor gebruiken we inline-block.
Deze waarde combineert de eigenschappen van inline en block: elementen staan naast elkaar, maar behouden hun blokkenstructuur.
display: inline-block kan zowel voor tekst als voor blok-elementen worden gebruikt.
display: table
De waarde table wordt standaard gebruikt voor tabellen. In tegenstelling tot blokken kun je een tabel wel over de volledige hoogte (100%) uitrekken. Toch gebruiken we tegenwoordig liever blokgebaseerde layouts in plaats van tabellen, omdat tabellen bedoeld zijn voor het weergeven van tabelgegevens, niet voor de paginalay-out.
display: list-item
Bij display: list-item (standaard voor het <li>-element) wordt automatisch een opsommingsteken (meestal een zwarte stip) toegevoegd.
display: none
Als je deze waarde toevoegt aan een klasse, tag of id, verdwijnt het element volledig van de pagina! Wees voorzichtig met dit gebruik, want je kunt per ongeluk iets belangrijks verbergen en later niet begrijpen waarom het element niet zichtbaar is. Maar als een klant bijvoorbeeld vraagt om een element te verwijderen (zoals een RSS-icoon), kun je dat eenvoudig doen:
.rss {
display: none;
}
Natuurlijk is het beter om het element volledig uit de template te verwijderen zodat het niet wordt gegenereerd, maar als het al wordt weergegeven, kun je het eenvoudig via CSS verbergen zonder ingewikkelde aanpassingen.