block & inline
block, inline e inline-block son modelos de visualización que definen cómo los elementos HTML se organizan y ocupan espacio en la página, controlando su flujo, alineación y dimensiones.
block
- Empiezan en una nueva línea.
- Ocupan, por defecto, todo el ancho disponible.
- Permiten definir width, height, margin, padding sin problema.
- Son ideales cuando necesitas que los elementos se apilen verticalmente y quieres controlar tamaño y espaciado.
Elementos HTML que son block por defecto:
<div><p><h1>...<h6><section><header><footer><main><aside><nav><ul><ol><li><form><table><blockquote>
Ejemplo
En este ejemplo tenemos un contenedor que contiene tres hijos con la clase child configurados como display block, donde cada hijo ocupa todo el ancho posible del contenedor al no tener un ancho establecido.
No sería necesario configurar la clase child como display block ya que por defecto, los div son block (se hace con fines didácticos).
inline
- No inician en una nueva línea y solo ocupan el ancho necesario.
- Se pueden anidar dentro de elementos block o inline.
- No permiten propiedades de caja como width, height, margin-top, margin-bottom. Generalmente, no puedes establecer width o height, ni márgenes verticales. Sí puedes aplicar padding y margin horizontal.
- Pueden contener solo texto u otros elementos inline.
- Son ideales cuando quieres que el contenido fluya dentro de un párrafo.
Elementos HTML que son inline por defecto:
<a><abbr><b><bdo><br><cite><code><dfn><em><i><kbd><label><map><mark><output><q><ruby><rp><rt><s><samp><small><span><strong><sub><time><u><var><wbr>
Ejemplo
En este ejemplo tenemos un contenedor que contiene tres hijos con la clase child configurados como display inline, donde cada hijo solo ocupa el ancho necesario del contenedor. Podemos comprobar cómo el padding del contenedor no se ajusta a la altura de sus hijos, si estos elementos son inline.
No sería necesario configurar la clase child como display inline ya que por defecto, los span son inline (se hace con fines didácticos).
inline-block
- Fluyen en línea como los elementos inline, pero permiten dimensiones de caja como los elementos block.
- Se alinean horizontalmente con otros elementos inline o inline-block.
- Sí aceptan propiedades como width, height, padding y margin (tanto verticales como horizontales).
- No inician en una nueva línea, pero respetan su propio tamaño dentro del flujo inline.
- Son ideales para componentes pequeños como botones, tarjetas o cajas que deben alinearse horizontalmente pero al mismo tiempo, tener un comportamiento de bloque.
Elementos HTML que son inline-block por defecto:
<button><input><select><textarea><img><iframe><canvas><video><audio><embed><object><meter><progress><svg><math>
Ejemplo
En este ejemplo tenemos un contenedor que contiene tres hijos con la clase child configurados como display inline-block, donde cada hijo ocupa el ancho y alto establecido en su configuración. Podemos comprobar cómo el contenedor se ajusta a la altura de sus hijos a diferencia de los elementos configurados como inline.