El modelo de caja en CSS

En CSS todo elemento es una caja rectangular. Entender cómo se calcula su tamaño es la clave para colocar cosas donde quieres.

Las cuatro capas

De dentro hacia fuera:

1. Contenido: el texto o la imagen. Su tamaño se controla con width y height.
2. Padding (relleno): espacio entre el contenido y el borde. Tiene el color de fondo de la caja.
3. Border (borde): la línea que rodea la caja.
4. Margin (margen): espacio fuera del borde, que separa la caja de las demás. Siempre es transparente.

.tarjeta {
  width: 300px;
  padding: 16px;
  border: 2px solid #ccc;
  margin: 24px;
}

Abre el inspector del navegador (F12), selecciona un elemento y verás su caja dibujada con las cuatro capas.

Valores en cada lado

padding y margin aceptan de uno a cuatro valores:

padding: 10px;                /* los 4 lados */
padding: 10px 20px;           /* arriba y abajo | izquierda y derecha */
padding: 10px 20px 30px 40px; /* arriba | derecha | abajo | izquierda (como las agujas del reloj) */
padding-top: 10px;            /* solo un lado */

Para centrar una caja con ancho fijo en horizontal: margin: 0 auto;

Bordes

El borde tiene tres características: grosor, estilo y color. Se pueden dar por separado o todas juntas con border:

.caja {
  border-width: 2px;
  border-style: solid;
  border-color: #2d6cdf;
  /* o todo junto: */
  border: 2px solid #2d6cdf;
}

.solo-abajo { border-bottom: 1px dashed #999; }

Estilos disponibles: solid (continuo), dashed (rayas), dotted (puntos), double (doble), none (sin borde) y otros menos usados (groove, ridge, inset, outset). Sin border-style no se ve ningún borde, aunque pongas grosor y color.

Esquinas redondeadas y sombras

.tarjeta {
  border-radius: 12px;                          /* esquinas redondeadas */
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.15);     /* sombra: x, y, desenfoque, color */
}
.avatar { border-radius: 50%; }                  /* círculo (si es cuadrado) */

outline: el contorno

outline se dibuja fuera del borde y no ocupa espacio, así que no mueve nada. El navegador lo usa para marcar el elemento seleccionado con el teclado. Nunca lo quites sin poner otra cosa (outline: none a secas deja a los usuarios de teclado sin saber dónde están):

button:focus-visible { outline: 3px solid #2d6cdf; outline-offset: 2px; }

El problema del ancho

Por defecto, width es el ancho del contenido. El padding y el borde se suman:

300 (width) + 16 + 16 (padding) + 2 + 2 (border) = 336px

Otro ejemplo: una caja con width: 250px, padding de 25px a cada lado, un borde de 5px y un margen de 20px ocupa en pantalla 20 + 5 + 25 + 250 + 25 + 5 + 20 = 350px de ancho (contando los márgenes).

Eso confunde muchísimo. La solución que usa casi todo el mundo es añadir esto al principio del CSS:

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

Con border-box, width incluye el padding y el borde. Si dices 300px, la caja mide 300px.

Cajas de bloque y en línea

• Los elementos de bloque (div, p, h1, section…) ocupan todo el ancho disponible y empiezan en una línea nueva.
• Los elementos en línea (a, span, strong…) solo ocupan lo que mide su contenido y van uno detrás de otro, como las palabras de un texto. Ignoran width, height y los márgenes de arriba y abajo.

Lo puedes cambiar con display:

a.boton { display: inline-block; padding: 10px 16px; }

inline-block va en línea, pero respeta el ancho, el alto y todos los márgenes.

Los márgenes que se juntan

Cuando dos márgenes verticales se tocan, no se suman: se queda el mayor. Si un párrafo tiene margin-bottom: 20px y el siguiente margin-top: 30px, entre ellos habrá 30px, no 50. Se llama margin collapse, y no pasa con los márgenes horizontales ni dentro de Flexbox o Grid.