En esta página

Box model

12 min lectura TextoCap. 2 — Box Model y posicionamiento

Qué es el box model?

Todo elemento HTML es una "caja" rectangular compuesta por cuatro areas, de adentro hacia afuera:

  1. Content — El contenido real (texto, imagenes)
  2. Padding — Espacio entre el contenido y el borde
  3. Border — El borde visible del elemento
  4. Margin — Espacio exterior que separa de otros elementos

Content area

El area de contenido es donde se muestra el texto, imagenes u otros elementos hijos. Su tamaño se controla con width y height.

Padding, border y margin

  • Padding: Espacio interno. Toma el color de fondo del elemento
  • Border: Borde visible. Se define con border: width style color
  • Margin: Espacio externo. Siempre es transparente

Box-sizing

Por defecto (content-box), width solo aplica al area de contenido. Con border-box, el width incluye padding y border:

/* Recomendado: aplicar a todos los elementos */
*, *::before, *::after {
  box-sizing: border-box;
}

Esto hace los calculos mucho más intuitivos y es la práctica estandar en desarrollo web moderno.

Margin collapsing

Los margenes verticales entre elementos hermanos se colapsan: en lugar de sumarse, se usa el margen más grande. Esto es un comportamiento intencional de CSS que debes tener en cuenta.

En la siguiente leccion aprenderemos Flexbox para crear layouts flexibles.

Práctica

  1. Compara content-box y border-box: Crea dos cajas de 300px de ancho con padding y border. Aplica box-sizing: content-box a una y border-box a la otra, y mide el ancho final con el inspector.
  2. Construye una tarjeta con el box model: Crea una tarjeta con padding interno, borde visible y margen exterior. Ajusta cada propiedad hasta conseguir un espaciado visualmente equilibrado.
  3. Observa el margin collapsing: Coloca dos <div> consecutivos con margenes verticales diferentes y verifica que el espacio entre ellos es el margen mayor (no la suma).
Cuidado
Los margenes verticales se colapsan. Si un elemento tiene margin-bottom 20px y el siguiente tiene margin-top 30px, el espacio entre ellos será 30px (no 50px).
css
/* Reset global recomendado */
*, *::before, *::after {
  box-sizing: border-box;
}

.card {
  width: 300px;       /* Incluye padding y border */
  padding: 1.5rem;
  border: 1px solid #ddd;
  margin: 1rem;
  border-radius: 8px;
  background: white;
}

/* Margin collapsing */
.section {
  margin-bottom: 2rem; /* Se colapsa con el margin-top del siguiente */
}