CSS
Explica cómo el flujo normal coloca elementos block e inline y cuándo los márgenes verticales colapsan entre cajas relacionadas.
El flujo normal es el layout predeterminado antes de Flexbox, Grid, floats o positioning.
<h1>Título</h1>
<p>Primer párrafo.</p>
<p>Segundo párrafo.</p>section {
max-inline-size: 65ch;
}Un block auto-sized se adapta al espacio disponible y su block size crece con el contenido.
Texto, links e inline boxes forman line boxes. La altura de línea, baselines y font metrics determinan su posición.
p {
line-height: 1.6;
}Texto directo junto a blocks puede generar anonymous block o inline boxes. El DOM no muestra necesariamente cada caja utilizada por layout.
Márgenes verticales/block de blocks en flow pueden colapsar en ciertas condiciones.
h2 { margin-block-end: 2rem; }
p { margin-block-start: 1rem; }La separación puede ser 2rem, no 3rem.
Pueden colapsar:
No colapsan normalmente:
La resolución con margins positivos y negativos no es una suma simple. Puede elegirse el mayor positivo y el negativo de mayor magnitud según el conjunto colapsado.
No añadas overflow: hidden únicamente para detener collapse si también recorta contenido. Opciones más claras:
.parent {
display: flow-root;
}o utiliza padding, border, Flex/Grid según el contrato real.
En Flex y Grid:
.stack {
display: grid;
gap: 1rem;
}Gap no colapsa y pertenece al contenedor, facilitando ritmo consistente.
El orden visual predeterminado sigue el DOM. Mantenerlo ayuda a lectura, foco y responsive.
¿Por qué dos margins verticales de 2rem y 1rem pueden producir solo 2rem de espacio?
Porque margins block adyacentes en normal flow pueden colapsar y conservar el mayor valor positivo.
Overflow y scrolling explica qué ocurre cuando el contenido supera la caja.