CSS Display
De eigenschap display bepaalt het type box dat door een element wordt gegenereerd.Klik om het paneel weer te geven
Dit paneel bevat een <div> element, dat standaard is verborgen (display: none;).
We kunnen CSS samen met JavaScript gebruiken om het paneel te tonen (display: block;).
CSS display eigenschap
De display eigenschap geeft aan hoe een element wordt weergegeven. Elk HTML-element heeft een standaard weergavewaarde, afhankelijk van het type element. De standaard weergavewaarde voor de meeste elementen is block of inline, bijvoorbeeld het <div> element wordt weergegeven als block, terwijl het <span> element inline wordt weergegeven.De standaard weergavewaarde wijzigen
Het overschrijven van de standaard weergavewaarde van een element met de display eigenschap is heel belangrijk. Bijvoorbeeld het wijzigen van een inline element dat moet worden weergegeven als een block element of het wijzigen van een block element dat moet worden weergegeven als een inline element. De eigenschap display is één van de krachtigste en nuttigste eigenschappen in CSS. Het kan erg handig zijn om webpagina's te maken die er op een andere manier uitzien.
display: none
visibility: hidden
Standaard waarde
CSS display block
De block waarde van de eigenschap display bepaalt dat de browser het element moet weergeven als een element op blokniveau. Dat betekent dat het wordt voorafgegaan en gevolgd door een overgang naar een nieuwe regel, zoals een <div> of <p> element. De stijlregels in het volgende voorbeeld geven de elementen <a> en <span> weer als elementen op blokniveau.
CSS display inline
De waarde bepaalt dat de browser het element moet weergeven als een inline element. Dat betekent dat het geen overgangen naar een nieuwe regel genereert en wordt weergegeven op dezelfde regel als de inline inhoud ervoor en erna, zoals een <span> of een <a> element. De stijlregels in het volgende voorbeeld geven de elementen <p> en <li> weer als elementen op inline-niveau.
CSS display inline-block
De waarde bepaalt dat de browser het element moet weergeven in een enkele inline box en niet verdeeld over meerdere regels. De inhoud van het element moet echter worden weergegeven als bij elementen op blokniveau. De volgende stijlregels geven de <div> en <span> elementen weer als inline-block.
CSS display none
De waarde bepaalt dat de browser voor het element geen box moet genereren. Het element wordt daardoor niet weergegeven en ook eventuele effecten op de lay-out van de rest van het document vervallen. Onderliggende elementen genereren ook geen boxen, zelfs als hun display eigenschap is ingesteld op iets anders dan none.
Inline-block gebruiken om navigatielinks te maken
De eigenschap display gebruiken met de waarde inline-block is er om lijstitems horizontaal weer te geven in plaats van verticaal. In het volgende voorbeeld worden horizontale navigatiekoppelingen (links) gemaakt.
Voorbeeld:
.nav {
background-color: teal;
color: #fff;
list-style-type: none;
text-align: center;
margin: 0;
padding: 0;
}
.nav li {
display: inline-block;
font-size: 18px;
padding: 20px;
}
.nav li a {
color: #fff;
text-decoration: underline;
}
.nav li a:hover {
text-decoration: none;
}
