En comparación con display: inline, la principal diferencia es que display: inline-block permite establecer un ancho y alto en el elemento. Además, con display: inline-block, se respetan los márgenes/rellenos superior e inferior, pero con display: inline no lo son.
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 el comportamiento diferente de display: inline, display: inline-block y display: block.
Ejm
<!DOCTYPE html>
<html lang="es">
<head>
<style>
span.a {
display: inline; /* EL VALOR POR DEFECTO */
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;
}
</style>
</head>
<body>
<h1>La propiedad Display</h1>
<h2>display: inline</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
consequat scelerisque elit sit amet consequat. Aliquam erat volutpat.
<span class="a">Hola</span><span class="a">Mundo</span></div>
<h2>display: inline-block</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
consequat scelerisque elit sit amet consequat. Aliquam erat volutpat.
<span class="b">Hola</span><span class="b">Mundo</span></div>
<h2>display: block</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
consequat scelerisque elit sit amet consequat. Aliquam erat volutpat.
<span class="c">Hola</span><span class="c">Mundo</span></div>
</body>
</html>
Uso de bloques en línea para crear enlaces de navegación
Se puede usar la propiedad display: inline-block para crear enlaces de navegación.