Visualización CSS: en línea frente a bloque en línea [duplicado]
En CSS, displaypuede tener valores de inliney inline-block. ¿Alguien puede explicar en detalle la diferencia entre inliney inline-block?
Busqué por todos lados, la explicación más detallada me dice inline-blockque 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.
Elementos en línea:
- respete los márgenes izquierdo y derecho y el relleno, pero no el superior y el inferior
- no se puede establecer un ancho y un alto
- Permita que otros elementos se sienten a su izquierda y derecha.
- Vea notas al margen muy importantes sobre esto aquí .
Elementos del bloque:
- respetar a todos esos
- forzar un salto de línea después del elemento de bloque
- adquiere el ancho completo si el ancho no está definido
Elementos de bloque en línea:
- permitir que otros elementos se sienten a su izquierda y derecha
- respetar los márgenes superior e inferior y el relleno
- respetar la altura y el ancho
De W3Schools :
Un elemento en línea no tiene salto 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 y no tolera ningún elemento HTML junto a él.
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 un poco más sobre este tema.
