1. ¿Qué controla la propiedad display?

En términos simples, display determina cómo un elemento se genera en la caja de formato (render tree) y cómo interactúa con sus hermanos. Los valores más usados son:

• block: genera una caja de bloque que ocupa todo el ancho disponible y se apila verticalmente.
• inline: genera una caja en línea que solo ocupa el ancho necesario y fluye junto a otros elementos en la misma línea.
• inline‑block: combina lo mejor de ambos mundos: se comporta como inline (permite estar en la misma línea) pero mantiene las dimensiones de bloque (puedes definir width y height).

2. Comparativa visual (dos columnas)

3. Ejemplos prácticos

3.1. Bloque simple

.caja {
  display: block;      /* valor por defecto para <div> */
  width: 80%;
  padding: 1rem;
  margin: 2rem auto;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
}

Resultado: la caja ocupa el 80 % del ancho del contenedor y se centra gracias a margin:auto. Cada .caja se coloca una debajo de otra.

3.2. Inline para texto resaltado

<p>Este es un párrafo con <span class="resaltar">texto en línea</span> que no rompe la línea.</p>

.resaltar {
  display: inline;   /* implícito, pero útil para sobrescribir */
  background: #ffeb3b;
  padding: 0 .3rem;
}

El span mantiene el flujo del texto y solo ocupa el ancho del contenido.

3.3. Inline‑block para un menú de navegación

<nav class="menu">
  <a href="#" class="item">Inicio</a>
  <a href="#" class="item">Servicios</a>
  <a href="#" class="item">Contacto</a>
</nav>

.menu .item {
  display: inline-block;   /* permite ancho/alto y margen horizontal */
  padding: .5rem 1rem;
  margin-right: .5rem;
  background: #007bff;
  color: #fff;
  text-decoration: none;
  border-radius: .25rem;
}
.menu .item:hover { background:#0056b3; }

Con inline‑block cada enlace se comporta como un botón con dimensiones controladas, pero sigue en la misma línea.

4. Compatibilidad, rendimiento y escalabilidad

• Compatibilidad: Todos los navegadores modernos (Chrome, Edge, Firefox, Safari) soportan los tres valores desde sus primeras versiones. No se requieren prefijos.
• Rendimiento: El cálculo de layout para inline‑block es ligeramente más costoso que inline porque el motor debe crear una caja de bloque dentro del flujo en línea. En la práctica, la diferencia es insignificante salvo en listas de miles de elementos.
• Escalabilidad: Para diseños responsivos, combina inline‑block con media queries o con flexbox/grid. Evita usar float para lograr alineaciones horizontales; inline‑block es más predecible y menos propenso a colapso de márgenes.

5. Buenas prácticas y accesibilidad

1. Usa display: block para contenedores estructurales (
   ,

   ,

   ) para que los lectores de pantalla los identifiquen como bloques lógicos.
2. Preferencia por inline‑block en componentes interactivos (botones, enlaces) que requieran un área clicable mayor; mejora la zona de toque en dispositivos móviles.
3. Evita establecer height fija en bloques que contengan texto variable; en su lugar, usa min-height o padding para mantener la consistencia.
4. Cuando combines inline‑block con font-size:0 en el contenedor para eliminar los espacios en blanco entre elementos (problema de whitespace en HTML).
5. Siempre define focus y hover estilos visibles para enlaces y botones en línea‑bloque, garantizando cumplimiento de WCAG 2.1 AA.

6. Depuración (troubleshooting)

Si un elemento no respeta width o height, verifica que no esté heredando display: inline. Usa las herramientas de desarrollador (Chrome DevTools → Computed Styles) y busca la regla display. Otra causa frecuente es que box-sizing esté en content-box, lo que puede generar desbordes inesperados.

/* Solución rápida */
.elemento {
  display: inline-block;   /* o block según el caso */
  box-sizing: border-box;  /* incluye padding y border en el ancho/alto */
}

7. Alternativas modernas: Flexbox y Grid

En muchos escenarios inline‑block puede ser reemplazado por flex o grid para obtener alineaciones más robustas:

• Flexbox: Ideal para menús horizontales con distribución automática y alineación de altura.
• CSS Grid: Perfecto para diseños de tarjetas donde se necesita control bidimensional.

Aunque inline‑block sigue siendo útil en componentes simples, conocer Flexbox/Grid permite crear layouts más adaptables sin depender de hacks de margin o whitespace.