etiquetas - css meaning

Pantalla CSS: inline vs inline-block

Question

Posible duplicado:
¿Cuál es la diferencia entre display: inline y display: inline-block?

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

Busqué en todas partes, la explicación más detallada me dice que inline-block se coloca como en inline , pero se comporta como un 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

Elementos en línea:

1. respete los márgenes y el relleno izquierdo y derecho, pero no los superiores e inferiores
2. no puede tener un ancho y altura establecidos
3. Permita que otros elementos se sienten a su izquierda y derecha.
4. Ver notas laterales muy importantes sobre esto here .

Elementos del bloque:

1. respeta a todos esos
2. forzar un salto de línea después del elemento de bloque
3. adquiere ancho completo si el ancho no está definido

Elementos de bloque en línea:

1. Permitir que otros elementos se sienten a su izquierda y derecha.
2. respete los márgenes superior e inferior y el relleno
3. respeta altura y anchura

Desde W3Schools :

• Un elemento en línea no tiene saltos de línea antes ni después, y tolera elementos HTML junto a él.

• Un elemento de bloque tiene algunos espacios en blanco encima y debajo de él 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 ve así:

La imagen está tomada de esta página , que también habla más sobre este tema.