Layout CSS - visualizzazione: blocco in linea
Il display: inline-block Value
Rispetto a display: inline, la differenza principale è che display: inline-blockpermette di impostare una larghezza e un'altezza sull'elemento.
Inoltre, con
display: inline-block, i margini/padding superiore e inferiore vengono rispettati, ma con display: inlineessi non lo sono.
Rispetto a display: block, la differenza principale è che display: inline-blocknon aggiunge un'interruzione di riga dopo l'elemento, quindi l'elemento può sedersi accanto ad altri elementi.
L'esempio seguente mostra il diverso comportamento di display: inline, display: inline-block
e display: block:
Esempio
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;
}
Utilizzo del blocco in linea per creare collegamenti di navigazione
Un uso comune display: inline-block
è visualizzare gli elementi dell'elenco orizzontalmente anziché verticalmente. L'esempio seguente crea collegamenti di navigazione orizzontali:
Esempio
.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;
}