Comparato al display: inline
, la differenza maggiore è che display: inline-block
consente di impostare una larghezza e un'altezza sull'elemento.
Inoltre, con display: inline-block
, i margini e i padding superiori e inferiori sono rispettati, ma con display: inline
no.
Comparato al display: block
, la differenza maggiore è che display: inline-block
non aggiunge una interruzione di linea dopo l'elemento, perciò l'elemento si colloca vicino all'altro elemento.
Il seguente esempio mostra il differente comportamento di display: inline
, display: inline-block
, e display: block
:
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;
}
Un uso comune di display: inline-block
è mostrare elenchi orizzontali invece di verticali. Il seguente esempio crea dei link di navigazione orizzontale:
.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;
}