El valor inline-block
En comparación con display: inline, la principal diferencia es que display: inline-block permite establecer un ancho y alto al elemento.
Además, con display: inline-block, se respetan los márgenes/rellenos superior e inferior, pero con display: inline no.
En comparación con display: block, la principal diferencia es que display: inline-block no agrega un salto de línea después del elemento, por lo que el elemento puede ubicarse junto a otros elementos.
El siguiente ejemplo muestra los diferentes comportamientos de display: inline, display: inline-block y display: block:
Ejemplo:
Uso de inline-block para crear un menú de navegación
Un uso común de display: inline-block es mostrar los elementos de la lista horizontalmente en lugar de verticalmente. El siguiente ejemplo crea enlaces de navegación horizontales:
Ejemplo:
Resumen
El valor inline-block en CSS permite establecer un ancho y alto al elemento y respetar los márgenes y rellenos superior e inferior. A diferencia de display: block, no agrega un salto de línea después del elemento, lo que permite ubicarlo junto a otros elementos. Un ejemplo común de uso es para mostrar elementos de lista horizontalmente, como en un menú de navegación.
Traducido con 💚 desde W3Schools.com