Box Model ejercicio

Margin y colapso de márgenes

El margin es el espacio exterior al borde — transparente, separa el elemento de sus vecinos. No hereda el fondo del elemento. Acepta valores negativos para “tirar” el elemento hacia sus vecinos.

Shorthand y propiedades individuales

El shorthand de margin sigue el mismo patrón TRBL (Top-Right-Bottom-Left, sentido horario) que padding:

/* 1 valor: todos los lados iguales */
margin: 24px;

/* 2 valores: vertical | horizontal */
margin: 16px 32px;

/* 3 valores: top | horizontal | bottom */
margin: 8px 24px 16px;

/* 4 valores: top | right | bottom | left */
margin: 8px 16px 24px 0;

Propiedades individuales:

.card {
  margin-top:    24px;
  margin-right:  24px;
  margin-bottom: 24px;
  margin-left:   24px;
}

margin: 0 auto — centrado horizontal

Un patrón fundamental: para centrar horizontalmente un elemento block con width declarado, margin: 0 auto distribuye el espacio disponible de forma equitativa entre left y right:

.card {
  width: 600px;
  margin: 0 auto;  /* vertical: 0, horizontal: auto → centra el elemento */
}

auto le dice al navegador “tomá todo el espacio disponible y distribuiló”. Solo funciona en elementos block con width explícito. Sin width declarado, el elemento ya ocupa todo el ancho — no hay espacio libre para distribuir.

Colapso de márgenes (margin collapsing)

En el flujo normal, cuando dos elementos bloque están uno encima del otro y sus márgenes verticales se tocan, esos márgenes no se suman — se fusionan. Gana el mayor de los dos:

<p style="margin-bottom: 24px">Párrafo uno</p>
<p style="margin-top: 16px">Párrafo dos</p>

→ El espacio entre los dos NO es 24 + 16 = 40px.
→ El espacio ES max(24, 16) = 24px. Los márgenes colapsaron.

La intuición que hay que instalar: los márgenes verticales son promesas de espacio mínimo, no contribuciones acumulables.

Dónde ocurre más seguido:

  1. Entre hermanos en flujo normal: el margin-bottom del primero colapsa con el margin-top del segundo.
  2. Entre padre e hijo sin separación: si un padre no tiene padding-top, border-top ni contenido inline antes del primer hijo, el margin-top del padre colapsa con el del hijo.

Cuando el colapso NO ocurre: si el padre tiene padding-top o border-top; en flexbox y grid; con elementos flotantes o posicionados. El detalle fino es material de Referencia.

Límite del sandbox: getComputedStyle(el).marginTop devuelve el valor DECLARADO del margin ("32px"), no el espacio colapsado resultante del layout. El colapso es un algoritmo del motor de layout — invisible al CSSOM. Por eso los checks de esta lección validan solo los valores declarados de margin-top y margin-bottom. El efecto del colapso se observa en el preview: el espacio entre las dos tarjetas es 32px, no 64px.

margin-left: auto / margin-right: auto: el valor resuelto en px depende del ancho del iframe (variable en el sandbox) → no se valida. Los checks solo cubren margin-top y margin-bottom.

Tu turno: primero probá margin: 32px para ver el espacio alrededor. Luego cambialo a margin: 32px auto para centrar horizontalmente. Fijate en el preview que el espacio ENTRE las tarjetas es 32px, no 64px — eso es el colapso en acción.

Separar y centrar las tarjetas de Café Aroma

El margin crea espacio fuera del borde — separa el elemento de sus vecinos. A diferencia del padding, es transparente. 1. Dale a `.card` un `margin` de **32px** en todos los lados. 2. Para centrar horizontalmente, cambialo a `margin: 32px auto`. Para que `auto` funcione, el elemento necesita un `width` declarado — ya está en el starter. **Sobre el colapso de márgenes (observar sin validar):** el HTML tiene dos `.card` seguidas. Fijate que el espacio ENTRE las dos tarjetas NO es 64px (32+32) sino 32px — los márgenes verticales adyacentes se fusionaron. El navegador tomó el mayor (ambos son 32px → 32px). Esto se llama **margin collapsing** y ocurre en el flujo normal.

Preview

En la referencia