de "display" property

display is CSS's meest belangrijke property om controle over de layout te krijgen. Elk element heeft een standaard display waarde afhankelijk van welk type element het is. De standaard voor de meeste elementen is block of inline. Een block element is doorgaans aangemerkt als een block-level element. Een inline element daarentegen wordt altijd aangemerkt als inline element.

block

<div>

div is het standaard block-level element. Een block-level element begint op een nieuwe regel en rekt uit zover het kan van links naar rechts. Andere bekende block-level elementen zijn p en form. Sinds HTML5 zijn daar bijvoorbeeld ook header, footer, section aan toegevoegd en zo zijn er nog meer.

</div>

inline

span is het standaard inline element. Een inline element kan tekst omvatten binnen een paragraaf. <span> zoals dit </span> zonder de flow van de paragraaf te beïnvloeden. Het a element is het meest voorkomende inline element, aangezien je deze voor links kunt gebruiken.

none

Een ander veel voorkomende display waarde is none. Verschillende speciale elementen zoals script gebruiken deze als standaard. Het is gebruikelijk binnen JavaScript om elementen te verbergen en tonen zonder ze daadwerkelijk te verwijderen en opnieuw aan te maken door middel van deze waarde.

Dit verschilt ten opzichte van de visibility property. Het zetten van de display naar none zal het element als niet bestaand aanmerken in de opmaak van de pagina. visibility: hidden; daarentegen zal het element verbergen en de ruimte in beslag nemen alsof het element wel zichtbaar was.

You found me!

andere display waardes

Er zijn nog meerdere, soms zelfs exotische, display waardes zoals list-item en table. Hier is een uitgebreide lijst. We zullen inline-block en flex later behandelen.

extra credit

Zoals ik al eerder zei, heeft elk element een standaard display type. Echter, dit is altijd te overschrijven! Hoewel het niet veel zin zou hebben om een inline div te maken, is er wel de mogelijkheid om de display van elementen met een bepaalde semantiek aan te passen. Een veelgebruikt voorbeeld is li elementen inline maken om een horizontaal menu samen te stellen.

  • Creative Commons License