Block frente a Inline e Inline-Block

La propiedad display es una de las más fundamentales de CSS. Determina cómo participa un elemento en el flujo del diseño: si crea una caja de nivel de bloque, una caja en línea o algo intermedio.

Los elementos de bloque comienzan en una línea nueva y se expanden para ocupar todo el ancho de su contenedor. Puede establecer el ancho, la altura, el margen y el padding en todos sus lados.

Elementos de bloque predeterminados: div, p, h1-h6, section, article.

Los elementos en línea fluyen dentro del texto. No comienzan en una línea nueva. Establecer width o height no tiene ningún efecto. El margen superior e inferior se ignora; los márgenes y el padding horizontales funcionan.

Elementos en línea predeterminados: span, a, strong, em, img.

display: inline-block es un híbrido. Los elementos fluyen en línea, sin forzar un salto de línea, pero admiten ancho, altura y todas las propiedades del modelo de cajas, como los elementos de bloque.

Antes de Flexbox, inline-block se utilizaba para las barras de navegación horizontales. Un inconveniente es que los espacios en blanco del código fuente HTML crean pequeños huecos entre los elementos.

El espacio entre elementos inline-block se puede eliminar estableciendo font-size: 0 en el elemento padre y restaurándolo en los hijos, o eliminando los espacios en blanco del HTML.

En el CSS moderno, establecer display: flex en el elemento padre es la forma preferida de conseguir diseños horizontales sin problemas de espacios en blanco. inline-block sigue siendo útil para dimensionar un único elemento.

El tipo de display de cualquier elemento se puede cambiar con CSS. Esto se usa habitualmente para dar forma de botón a los enlaces o disponer horizontalmente los elementos de una lista.

CSS proporciona display: table, display: table-row, display: table-cell, etc., para aplicar un diseño de tabla a elementos que no son tablas. Hoy en día se necesitan rara vez, pero son útiles para centrar verticalmente en contextos antiguos.

display: flow-root crea un nuevo contexto de formato de bloque sin los efectos secundarios de overflow: hidden. Elimina los elementos flotantes y evita que el colapso de márgenes se propague fuera de un contenedor.

Cuando se mezclan elementos de bloque y en línea como elementos hermanos, el navegador envuelve el contenido en línea huérfano en cajas de bloque anónimas. Este comportamiento es invisible, pero explica cambios inesperados en el diseño.

¿Qué valor de display permite establecer width y mantener el elemento en el flujo en línea?

Los elementos de bloque ocupan todo el ancho y comienzan en una línea nueva. Los elementos en línea fluyen con el texto e ignoran width y height. inline-block combina ambas características: fluye en línea, pero acepta ancho y altura. Los diseños modernos prefieren Flexbox y Grid a las cuadrículas creadas con inline-block.