¿Cuál es la diferencia entre display: inline vs display: block en CSS?

Blog

¿Cuál es la diferencia entre display: inline vs display: block en CSS?

bloqueo de pantalla significa que el elemento se muestra como un bloque, como siempre lo han sido los párrafos y los encabezados. Un bloque tiene algunos espacios en blanco arriba y abajo y no tolera ningún elemento HTML junto a él, excepto cuando se ordena lo contrario (agregando una declaración flotante a otro elemento, por ejemplo).



pantalla: en línea significa que el elemento se muestra en línea, dentro del bloque actual en la misma línea. Solo cuando está entre dos bloques, el elemento forma un 'bloque anónimo', que sin embargo tiene el ancho más pequeño posible.






Elementos en línea:



  • respetar los márgenes y el relleno izquierdo y derecho, pero no superior e inferior
  • no se puede establecer un ancho y una altura
  • permitir que otros elementos se sienten a su izquierda y derecha.

Elementos de bloque:



  • respetar a todos esos
  • forzar un salto de línea después del elemento de bloque
  • adquiere 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

Tabla de comparación:

¿Cuál es la diferencia entre display: inline vs display: block en CSS?

#css # css3 #stylesheet