El modelo de caja

Entiende cómo CSS trata cada elemento como una caja con contenido, padding, border y margin. La base del layout.

En CSS, cada elemento es una caja. Entender cómo funciona esa caja —y sus cuatro capas— es imprescindible para controlar el espaciado y el tamaño de cualquier elemento.

Las cuatro capas

+---------------------------+
|         MARGIN            |  ← espacio exterior (transparente)
|  +---------------------+  |
|  |      BORDER         |  |  ← borde visible (o no)
|  |  +---------------+  |  |
|  |  |    PADDING    |  |  |  ← espacio interior
|  |  |  +---------+  |  |  |
|  |  |  | CONTENT |  |  |  |  ← el contenido real
|  |  |  +---------+  |  |  |
|  |  +---------------+  |  |
|  +---------------------+  |
+---------------------------+
  • content: el texto, la imagen, lo que contiene el elemento
  • padding: espacio entre el contenido y el borde; hereda el fondo del elemento
  • border: línea alrededor del padding; puede ser visible
  • margin: espacio exterior que separa este elemento de los demás; siempre transparente

box-sizing: la propiedad que lo cambia todo

Por defecto, CSS usa box-sizing: content-box:

.caja {
  width: 200px;
  padding: 20px;
  border: 2px solid black;
  /* Ancho real en pantalla: 200 + 20+20 + 2+2 = 244px */
}

El padding y el border se añaden al width declarado. Esto es contraintuitivo.

La solución: box-sizing: border-box:

*, *::before, *::after {
  box-sizing: border-box;
}

Con border-box, el width incluye padding y border. El elemento mide exactamente lo que declaras:

.caja {
  width: 200px;
  padding: 20px;
  border: 2px solid black;
  /* Ancho real en pantalla: 200px exactos */
}

Casi todos los proyectos modernos aplican box-sizing: border-box globalmente desde el inicio. Es una de las primeras líneas de cualquier reset CSS.

Margin, padding y border en la práctica

.tarjeta {
  /* Padding: todos los lados */
  padding: 1.5rem;

  /* Padding: vertical | horizontal */
  padding: 1rem 2rem;

  /* Padding: arriba | derecha | abajo | izquierda */
  padding: 1rem 2rem 1.5rem 2rem;

  /* Propiedades individuales */
  padding-top: 1rem;
  padding-right: 2rem;
  padding-bottom: 1.5rem;
  padding-left: 2rem;
}

Lo mismo aplica a margin y border.

Colapso de márgenes

Cuando dos elementos en bloque están uno encima del otro, sus márgenes se colapsan: en vez de sumarse, el espacio entre ellos es el mayor de los dos.

.parrafo-1 { margin-bottom: 2rem; }
.parrafo-2 { margin-top: 1rem; }
/* Espacio entre ellos: 2rem, no 3rem */

Esto solo ocurre con márgenes verticales en elementos de bloque. Flexbox y Grid no colapsan márgenes.

Tipos de caja: display

No todas las cajas se comportan igual. La propiedad display cambia el tipo:

/* Bloque: ocupa todo el ancho disponible, genera salto de línea */
div, p, h1  { display: block; }

/* Inline: fluye con el texto, no acepta width ni height */
span, a, em { display: inline; }

/* Inline-block: fluye con el texto pero acepta width y height */
img         { display: inline-block; }

/* Flex y Grid: los veremos en lecciones dedicadas */
.contenedor { display: flex; }
.cuadricula { display: grid; }

width, height y sus límites

.imagen {
  width: 100%;          /* relativo al contenedor */
  max-width: 800px;     /* nunca más de 800px */
  height: auto;         /* mantiene proporción */
}

.sidebar {
  width: 280px;
  min-height: 100vh;    /* al menos toda la altura del viewport */
}

En la siguiente lección vemos colores y tipografía: las propiedades que más impacto visual tienen.