El modelo de caja (Box Model)
Todo elemento en una página HTML es, literalmente, una caja rectangular. Entender cómo se compone esa caja es probablemente el concepto más importante de todo CSS — casi todos los quebraderos de cabeza de maquetación vienen de no dominarlo.
Las cuatro capas de toda caja
De dentro hacia fuera, cada elemento se compone de:
El contenido en sí: el texto, la imagen, lo que sea. Su tamaño lo controlan width y height.
El espacio interno entre el contenido y el borde. "Acolchado" — empuja el borde hacia afuera sin mover el contenido.
El borde en sí: una línea (o varias) alrededor del padding.
El espacio externo, entre el borde de este elemento y los elementos vecinos.
El problema del ancho "sorpresa"
Por defecto, width solo define el ancho del
contenido. El padding y el borde se suman a ese ancho,
así que una caja con width: 200px y
padding: 20px ocupa en realidad 240px de ancho total.
Esto sorprende a casi todo el mundo la primera vez.
Cambia la regla: ahora width incluye el padding y el borde. El elemento mide exactamente lo que dices, y el contenido se ajusta hacia dentro. Es tan útil que casi todo el mundo lo aplica a * al principio de cada proyecto.
Empieza casi cualquier proyecto con * { box-sizing: border-box; }
en tu CSS. Te ahorrarás horas de confusión más adelante, y es prácticamente un
estándar en la industria.
El colapso de márgenes verticales
Un comportamiento que sorprende: si dos elementos apilados tienen margen inferior y superior respectivamente, esos márgenes no se suman — se "colapsan" y solo se aplica el mayor de los dos. Esto solo ocurre en vertical, nunca en horizontal.
Esperar que dos márgenes de 20px se conviertan en 40px de separación entre
dos párrafos apilados. En realidad quedará solo 20px, porque colapsan. Si
necesitas un control más predecible, usa gap en un
contenedor flex o grid (lo verás en los módulos 5 y 6).
Ponlo a prueba
Comprueba lo que has aprendido
1. De dentro hacia afuera, ¿cuál es el orden correcto de capas?
2. ¿Qué hace box-sizing: border-box?
3. ¿Qué ocurre con dos márgenes verticales de 20px entre elementos apilados?