Display: block, inline, inline-block y none vs visibility

¿Por qué dos div se apilan uno debajo del otro y dos a conviven en la misma línea? No es magia ni capricho: es la propiedad display, el interruptor que define cómo se comporta cada caja frente a sus vecinas. Hoy entiendes las tres personalidades básicas — la base sobre la que flex y grid construirán después.

Las tres personalidades

• block: ocupa TODO el ancho disponible y empuja a lo siguiente a una línea nueva. Acepta width, height, márgenes completos. Son block por defecto: div, p, h1-h6, section, article, ul, form.
• inline: fluye DENTRO del texto, mide lo que mide su contenido, e ignora width, height y márgenes verticales. Son inline: a, span, strong, em.
• inline-block: el híbrido — fluye en línea como inline, pero acepta dimensiones como block.

<div class="bloque">block: toda la fila para mí</div>
<div class="bloque">block: yo en la siguiente</div>
<span class="linea">inline</span>
<span class="linea">convivimos</span>
<span class="linea">en la línea</span>
<br>
<a class="boton" href="#">inline-block</a>
<a class="boton" href="#">con tamaño propio</a>

body { font-family: system-ui; padding: 24px; color: #1e293b; }
.bloque { background: #ede9fe; padding: 8px 12px; margin-bottom: 8px; border-radius: 6px; }
.linea { background: #fef3c7; padding: 4px; border-radius: 4px; }
.boton {
display: inline-block;
background: #6d28d9; color: white;
padding: 10px 24px; margin-top: 12px;
border-radius: 8px; text-decoration: none;
}

El caso de uso clásico de inline-block está en el ejemplo: convertir enlaces en botones. Un a es inline (no acepta padding vertical de forma confiable); con display: inline-block obtiene cuerpo de botón sin perder su lugar en la línea.

Ocultar: none vs visibility vs opacity

Tres formas de "desaparecer" algo, tres resultados distintos:

La diferencia importa para accesibilidad y animaciones: display: none también lo oculta de los lectores de pantalla; visibility: hidden igual, pero conserva el hueco; opacity: 0 lo deja presente a TODO (foco de teclado incluido — cuidado con botones invisibles clickeables). Además, display no se puede animar con transiciones; opacity sí — por eso las animaciones de aparición usan opacity (módulo 10).

Mini-reto

Convierte los enlaces del nav de tu periódico en "pastillas": display: inline-block, padding, fondo de color y border-radius. Luego experimenta en DevTools: cámbiale el display a un h2 (inline) y a un enlace (block) y observa cómo se reacomoda todo el flujo.

Qué sigue

Última lección teórica del módulo: qué pasa cuando el contenido no cabe en su caja (overflow) y las dos propiedades modernas que domestican imágenes: object-fit y aspect-ratio.