CSS display: inline vs inline-block

Question

Duplicar posibles:
What is the difference between display: inline and display: inline-block?

En CSS, display pueden tener valores de inline y inline-block. ¿Alguien puede explicar en detalle la diferencia entre inline y inline-block?

He buscado en todas partes, la explicación más detallada me dice inline-block se coloca como inline, pero se comporta como block. Pero no explica qué significa exactamente "comportarse como un bloque". ¿Es alguna característica especial?

Un ejemplo sería una respuesta aún mejor. Gracias.

Answer 1

Los elementos en línea:

1. respecto dejaron & márgenes derecho y el relleno, pero no superior & inferior
2. no puede tener una anchura y altura establecen
3. permitir que otros elementos para sentarse a su izquierda y derecha.
4. ver notas al margen muy importantes sobre este here.

elementos de bloque:

1. respeto todas esas
2. fuerza un salto de línea después de que el elemento de bloque

elementos inline-block:

1. permitir que otros elementos sentarse a su izquierda y derecha
2. respetar superiores & márgenes inferiores y el relleno
3. altura respecto y el ancho

De W3Schools:

• Un elemento en línea tiene ningún salto de línea antes o después de ella, y que tolera HTML elementos a su lado.

• Un elemento de bloque tiene algunos espacios en blanco arriba y abajo y no tolera ningún elemento HTML al lado.

• Un elemento de bloque en línea se coloca como un elemento en línea (en la misma línea que el contenido adyacente), pero se comporta como un elemento de bloque.

Cuando visualizas esto, se parece a esto:

La imagen está tomada de this page, que también habla un poco más sobre este tema.