La caja y el flujo del documento

1.Todo es una caja

Para el navegador, cada elemento es una caja rectangular, sin excepción: un párrafo, una imagen, un enlace, incluso un círculo es una caja con las esquinas redondeadas. Entender las cajas es entender el 80% del diseño con CSS.

2.box-sizing: la propiedad que te ahorra dolores de cabeza

Por defecto, width mide solo el contenido. Si pones width: 300px y padding: 20px y border: 5px, la caja real mide 300 + 40 + 10 = 350 px. Eso complica todos los cálculos.

Con box-sizing: border-box, width incluye el relleno y el borde: la caja mide exactamente 300px.

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

Con esa regla, width: 50% significa la mitad del contenedor, incluidos relleno y borde. Es lo que esperas.

3.Margin y padding en detalle

Márgenes: tres comportamientos que sorprenden

1. margin: 0 auto centra horizontalmente un bloque que tenga ancho (width o max-width).
2. Los márgenes verticales se «colapsan»: dos bloques con margin-bottom: 30px y margin-top: 20px no se separan 50px, sino 30px (se queda el mayor).
3. Los márgenes pueden ser negativos (margin-left: -10px) para acercar o superponer elementos. Úsalo con cuidado.

4.Bordes, esquinas y contornos

.caja {
  border: 2px solid #4f46e5;            /* ancho, estilo, color */
  border-bottom: 4px dashed crimson;    /* un solo lado */
  border-radius: 12px;                  /* esquinas redondeadas */
}
.circulo { width: 80px; height: 80px; border-radius: 50%; }
.pildora { border-radius: 999px; }

• Estilos de borde: solid, dashed, dotted, double, none.
• border-radius: 50% en una caja cuadrada la convierte en círculo; 999px en una caja larga, en una píldora.
• outline parece un borde pero no ocupa espacio ni altera el diseño. Por eso lo usa el foco del teclado (outline: 3px solid).

5.display: bloque, en línea y los demás

Ocultar un elemento: tres maneras distintas

6.Cuando el contenido no cabe: overflow

.titulo-largo {
  white-space: nowrap;       /* no saltar de línea */
  overflow: hidden;          /* recortar lo que sobra */
  text-overflow: ellipsis;   /* terminar con … */
}

.cuadro-scroll { max-height: 160px; overflow-y: auto; }

7.Tamaños: width, height y proporciones

.foto {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

8.Errores frecuentes

• No usar box-sizing: border-box y que los anchos «no cuadren».
• Esperar que margin: auto centre un bloque sin ancho: no hay nada que centrar.
• Dar width/height a un elemento inline: se ignora; cámbialo a inline-block o block.
• Margen vertical que «no suma»: es el colapso de márgenes.
• Usar height fijo para textos: si el texto crece, se sale. Prefiere min-height.
• Usar margin para separar elementos dentro de un flex/grid en lugar de gap.
• Esconder con opacity: 0 algo que no debe ser accesible.

9.Glosario