Alle elementen hebben van nature een wijze waarop ze worden weergegeven. We spreken van display-types. Deze display-types kunnen worden aangepast. In deze demo zie je de typen: blok, inline, inline-block en none.
- block:
- begint altijd op een nieuwe regel;
- neemt de beschikbare breedte volledig in en vormt een rechthoek;
- Om ze naast elkaar te krijgen volstaat het niet dat de breedte wordt ingeperkt, maar moet het element ook nog een float-eigenschap krijgen. (Dit levert vaak nieuwe problemen, die opgelost moeten worden);
- Voorbeeld: paragrafen.
- inline:
- voegt zich op dezelfde regel als het vorige element;
- en gebruikt alleen de ruimte, die voor het element nodig is;
- Voorbeeld: het link-element a.
- inline-block:
- Elementen vormen wel een blokje, maar beginnen niet noodzakelijk op een nieuwe regel. Als er ruimte voor is, staan er andere inline-block-elementen naast;
- Daarbij wordt de onderzijde uitgelijnd;
- Omdat er in de code tussen elementen spaties staan, komt er tussen 2 elementen ook altijd een ruimte ter grootte van de spatie tussen.
- none: wordt niet getoond: het lijkt alsof het element niet bestaat.