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