El Box Model es el principio fundamental de CSS que establece que todo elemento HTML es, en realidad, una caja rectangular compuesta por cuatro capas anidadas.
Entender este concepto es básico si queréis maquetar páginas web. Es la base sobre la que el navegador calcula el ancho, el alto y la separación de cualquier etiqueta que veáis en la pantalla.
Si no domináis esto, pasaréis horas peleando con elementos que no caben donde deberían (un pequeño infierno de frustración).
En la web, el motor de renderizado dibuja cada elemento siguiendo exactamente esta misma estructura. Vamos a desglosar estas cuatro capas, desde dentro hacia afuera.
Las cuatro capas de la caja
Es el núcleo de nuestra caja. Es el área real donde vive el texto, la imagen o cualquier otro elemento hijo.
Su tamaño se controla directamente mediante las propiedades width (ancho) y height (alto). Si no le definís un tamaño explícitamente, ocupará el espacio necesario para mostrar lo que lleva dentro.
El padding es el espacio transparente que hay entre el contenido y el borde de la caja.
Su función principal es “dar aire” al contenido hacia adentro, para que el texto no se quede asfixiado y pegado a las paredes del contenedor.
El padding tiene el color de fondo (background-color) que le hayáis puesto al elemento.
El border es la línea perimetral que envuelve al contenido y a su padding.
Es el límite físico real de nuestro elemento. Todo lo que esté dentro de la línea del borde se considera “dentro del elemento”, y todo lo que esté por fuera es terreno de los vecinos.
El margin es el espacio invisible que hay por fuera del borde, y sirve para empujar y separar nuestra caja de las demás cajas adyacentes.
A diferencia del relleno interior, el margen siempre es completamente transparente. Nunca se tiñe con el color de fondo de la caja (técnicamente ya no pertenece a ella, es simplemente “espacio vacío” que exige a su alrededor).
Atajos para escribir márgenes y rellenos
Tanto margin como padding permiten escribir varios valores en una sola línea. Es una sintaxis muy habitual, así que toca acostumbrarse a ella,
.caja {
padding: 20px;
margin: 10px 30px;
}
Cuando ponemos
- Un único valor, se aplica a los cuatro lados.
- Dos valores, el primero se aplica arriba y abajo, y el segundo a izquierda y derecha.
.caja {
/* arriba | derecha | abajo | izquierda */
padding: 10px 20px 30px 40px;
}
Con cuatro valores, CSS sigue el sentido de las agujas del reloj: arriba, derecha, abajo e izquierda (es una de esas cosas que al principio hay que mirar dos veces, y luego sale sola).
Si solo queréis tocar un lado, también podéis usar padding-top, padding-right, padding-bottom, padding-left y sus equivalentes con margin.
El problema del cálculo de tamaños
Todo esto suena muy lógico, hasta que nos ponemos a escribir código. Observad este bloque CSS:
.mi-caja {
width: 200px;
padding: 20px;
border: 5px solid black;
margin: 30px;
}
Si miramos este código de reojo, ¿cuánto ocupa realmente la caja en la pantalla? Cualquiera diría que 200 píxeles, porque lo pone claramente en la propiedad width. ¡Pues no!
Por defecto, el ancho total visible es la suma de todas sus partes internas. En este caso: 200 (contenido) + 20 (padding izquierdo) + 20 (padding derecho) + 5 (borde izquierdo) + 5 (borde derecho) = 250 píxeles reales.
Esta forma de calcular los tamaños es un quebradero de cabeza tremendo a la hora de maquetar. Si queréis encajar una caja en un hueco de exactamente 200 píxeles, y de repente decidís añadirle un poco de padding para que el texto respire, la caja “engordará”, se saldrá del hueco y os romperá todo el diseño de la web.
Para arreglar este comportamiento tan poco intuitivo, CSS nos da una propiedad muy práctica: box-sizing 👇.
La solución: box-sizing
Si le asignamos el valor border-box, cambiamos por las reglas de las matemáticas del navegador.
A partir de ese momento, el width que le deis a una caja será su tamaño total y final, obligando al padding y al border a crecer “hacia adentro”, reduciendo el espacio del contenido pero sin alterar el tamaño exterior.
Es una práctica estándar en la industria aplicar esta regla a absolutamente todos los elementos de la web.
* {
box-sizing: border-box;
}
Poned siempre este fragmento al principio de vuestros archivos CSS (el asterisco * selecciona todo) y os ahorraréis años de vida en disgustos.
Ahora que sabemos cómo dimensionar y separar nuestras cajas con total precisión matemática, nos falta aprender a sacarlas de su flujo normal y moverlas por la pantalla a nuestro antojo.
En la próxima entrada subiremos el nivel explorando el posicionamiento clásico en CSS (relative, absolute, fixed).
