CSS -lay-out - weergave: inline-blok
Het display: inline-blok Waarde
In vergelijking met display: inline, is het belangrijkste verschil dat display: inline-blockhet mogelijk is om een breedte en hoogte op het element in te stellen.
Ook met
display: inline-blockworden de boven- en ondermarges/opvullingen gerespecteerd, maar bij display: inlineniet.
Vergeleken met display: block, is het belangrijkste verschil dat display: inline-blocker geen regeleinde wordt toegevoegd na het element, zodat het element naast andere elementen kan staan.
Het volgende voorbeeld toont het verschillende gedrag van display: inline, display: inline-block
en display: block:
Voorbeeld
span.a {
display: inline; /* the default for span */
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.b {
display:
inline-block;
width: 100px;
height:
100px;
padding: 5px;
border: 1px
solid blue;
background-color: yellow;
}
span.c {
display: block;
width:
100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
Inline-block gebruiken om navigatielinks te maken
Een veelgebruikt gebruik voor display: inline-block
is om lijstitems horizontaal weer te geven in plaats van verticaal. In het volgende voorbeeld worden horizontale navigatiekoppelingen gemaakt:
Voorbeeld
.nav {
background-color: yellow;
list-style-type: none;
text-align:
center;
padding: 0;
margin: 0;
}
.nav li {
display: inline-block;
font-size: 20px;
padding:
20px;
}