HTML/CSS lab

01 · Layout

Display

display es la propiedad CSS más fundamental de todas: define cómo se comporta una caja dentro del flujo del documento — si ocupa toda la línea, si respeta el ancho/alto que le des, o si ni siquiera se renderiza.

block vs inline: la diferencia base

Un elemento block (div, p, section...) ocupa todo el ancho disponible y siempre empieza en una línea nueva. Un elemento inline (span, a, strong...) solo ocupa el espacio de su contenido y fluye junto al texto.

block
block (línea nueva)
inline fluye junto
<div class="block bg-teal-100">Soy block</div>
<div class="block bg-teal-100">También ocupo toda la línea</div>

<span class="bg-amber-100">Soy inline</span>
<span class="bg-amber-100">y fluyo junto al anterior</span>

inline-block: lo mejor de ambos

Fluye en línea como inline (no rompe a una nueva línea), pero sí respeta width, height y margin — el punto medio típico para botones o badges en medio de texto.

Este texto tiene unmetido en medio.

<p>
  Este texto tiene un
  <span class="inline-block w-20 h-6 bg-amber-200 align-middle rounded"></span>
  metido en medio, y sigue fluyendo.
</p>

hidden: sacar del flujo por completo

display: none. El elemento no se renderiza, no ocupa espacio, y desaparece también para lectores de pantalla — a diferencia de sr-only, que solo lo oculta visualmente.

hidden md:block
→ agranda la ventana para verlo
<div class="hidden md:block">
  Solo visible desde tablet hacia arriba
</div>

inline-flex e inline-grid

Igual que flex/grid, pero la caja contenedora se comporta como inline hacia afuera (fluye junto a otro contenido) mientras sus hijos se organizan con flex o grid hacia adentro.

Este producto esNuevoesta temporada.

<span class="inline-flex items-center gap-1 bg-stone-900 text-white px-2 py-0.5 rounded-full text-xs">
  <svg class="size-3">...</svg>
  Nuevo
</span>