CSS -uitleg - vertoon: inlyn-blok
Die vertoning: inlynblokwaarde
In vergelyking met display: inline, is die groot verskil dat display: inline-blockdit 'n breedte en hoogte op die element kan stel.
Ook, met
display: inline-block, word die boonste en onderste kantlyne/opvullings gerespekteer, maar met display: inlinehulle nie.
In vergelyking met display: block, is die groot verskil dat display: inline-blockdit nie 'n lynbreuk na die element byvoeg nie, sodat die element langs ander elemente kan sit.
Die volgende voorbeeld toon die verskillende 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;
}
Gebruik inlynblok om navigasieskakels te skep
Een algemene gebruik vir display: inline-block
is om lysitems horisontaal in plaas van vertikaal te vertoon. Die volgende voorbeeld skep horisontale navigasieskakels:
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;
}