display

Elk element op een webpagina is een rechthoekig vak. De display eigenschap in CSS bepaalt hoe die rechthoekige box zich gedraagt. Er zijn slechts een handvol waarden die vaak worden gebruikt:

div { display: inline; /* Default of all elements, unless UA stylesheet overrides */ display: inline-block; /* Characteristics of block, but sits on a line */ display: block; /* UA stylesheet makes things like <div> and <section> block */ display: run-in; /* Not particularly well supported or common */ display: none; /* Hide */}

De standaardwaarde voor alle elementen is inline. De meeste “User Agent Stylesheets” (de standaard stijlen die de browser toepast op alle sites) zetten veel elementen terug op “block”. Laten we elk van deze waarden eens doornemen, en dan enkele van de andere, minder gebruikelijke waarden.

Inline

De standaardwaarde voor elementen. Denk aan elementen als <span><em>, of <b> en hoe het verpakken van tekst in die elementen binnen een tekststring de stroom van de tekst niet breekt.

Het <em> element heeft een 1px rode rand. Merk op dat het inline staat met de rest van de tekst.

Een inline element accepteert marge en padding, maar het element staat nog steeds inline zoals je zou verwachten. Marge en padding duwen andere elementen alleen horizontaal weg, niet verticaal.

Een inline-element accepteert geen height en width.

Inline Block

Een element dat is ingesteld op inline-block lijkt erg op inline, in die zin dat het inline met de natuurlijke tekststroom wordt gezet (op de “basislijn”). Het verschil is dat u een width en height kunt instellen die zullen worden gerespecteerd.

Blok

Een aantal elementen wordt door de browser UA stylesheet ingesteld op block. Het zijn meestal container elementen, zoals <div><section>, en <ul>. Ook tekst “blokken” zoals <p> en <h1>. Elementen op blokniveau zitten niet inline maar breken er voorbij. Standaard (zonder een breedte in te stellen) nemen ze zoveel horizontale ruimte in als ze kunnen.

Inloop

Eerst, deze eigenschap werkt niet in Firefox. Er wordt gezegd dat de spec voor deze eigenschap niet goed genoeg is gedefinieerd. Maar om het te begrijpen, is het net alsof je een koptekst element inline wilt hebben met de tekst eronder. Zwevend zal het niet werken en ook niet iets anders, omdat je niet wilt dat de header een kind is van het tekstelement eronder, je wilt dat het een eigen onafhankelijk element is. In “ondersteunende” browsers werkt het als volgt:

Flexbox

De display eigenschap wordt ook gebruikt voor nieuwerwetse opmaakmethoden zoals Flexbox.

.header { display: flex;}

Er zijn wat oudere versies van de flexbox syntax, dus raadpleeg dit artikel voor de syntax in het gebruik van flexbox met de beste browser ondersteuning. Bekijk zeker ook deze complete gids voor Flexbox.

Flow-Root

De flow-root weergavewaarde creëert een nieuwe “blokopmaakcontext”, maar is verder net als block. Een nieuwe BFC helpt bij zaken als het opruimen van floats, waardoor er geen hacks meer nodig zijn om dat te doen.

.group { display: flow-root;}

Rasterindeling

Rasterindeling wordt in eerste instantie ook ingesteld door de display-eigenschap.

body { display: grid;}

Hier vindt u onze gids over Grid-layout, inclusief een ondersteuningsgrafiek voor browsers.

Geen

Hiermee wordt het element volledig van de pagina verwijderd. Merk op dat terwijl het element nog steeds in het DOM is, het visueel en op elke andere denkbare manier wordt verwijderd (je kunt er niet naar tabben of naar zijn kinderen, het wordt genegeerd door schermlezers, etc).

Tabelwaarden

Er is een hele set weergavewaarden die niet-tabelelementen dwingen zich als tabelelementen te gedragen, als je dat nodig hebt. Het is zeldzaam, maar het stelt je soms in staat om “semantischer” te zijn met je code terwijl je de unieke positioneringskrachten van tabellen gebruikt.

div { display: table; display: table-cell; display: table-column; display: table-colgroup; display: table-header-group; display: table-row-group; display: table-footer-group; display: table-row; display: table-caption;}

Om het te gebruiken, hoef je alleen maar de normale tabelstructuur na te bootsen. Eenvoudig voorbeeld:

<div style="display: table;"> <div style="display: table-row;"> <div style="display: table-cell;"> Gross but sometimes useful. </div> </div></div>