Una caja de 200 píxeles ocupa 250
El modelo de caja dice que cada elemento de una página es una caja rectangular, con contenido, relleno, borde y margen. Entenderlo explica por qué una caja de 200 píxeles de ancho puede ocupar 250.
Piensa en la carta de la cafetería de tu facultad. Cada plato es una tarjeta. Si el cálculo del ancho falla, las tarjetas no caben en una fila y la página se rompe.
Al terminar esta lección
Nota
Puedo maquetar una página con el modelo de caja, flexbox y grid.
Palabras clave
| Palabra | Qué significa | Ejemplo |
|---|---|---|
| Relleno | el espacio dentro de la caja, entre el contenido y el borde | padding |
| Borde | la línea que rodea el relleno | border |
| Margen | el espacio fuera de la caja, hasta la siguiente | margin |
| Flexbox | un diseño que reparte las cajas en una fila o una columna | display: flex |
| Grid | un diseño que reparte las cajas en filas y columnas | display: grid |
| Píxel | un punto de la pantalla, la unidad de medida de esta lección | 200px |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Cada elemento es una caja de cuatro capas
De dentro hacia fuera, una caja tiene el contenido, el relleno, el borde y el margen. El relleno da aire al contenido. El margen separa la caja de las vecinas.
Por defecto, width mide solo el contenido. El relleno y el borde se suman después, y la caja ocupa más de lo que pone en width.
Una tarjeta de plato con sus cuatro capas
.plato {
width: 200px;
padding: 20px;
border: 5px solid #b3402a;
margin: 10px;
}Ejemplo resuelto: lo que ocupa la tarjeta
| Capa | Por defecto | Con border-box |
|---|---|---|
| Contenido | 200 px | 150 px |
| Relleno, 20 px a cada lado | 40 px | 40 px |
| Borde, 5 px a cada lado | 10 px | 10 px |
| Caja visible | 250 px | 200 px |
| Margen, 10 px a cada lado | 20 px | 20 px |
| Espacio total en la fila | 270 px | 220 px |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Con border-box, width incluye relleno y borde
La propiedad box-sizing: border-box cambia el cálculo. Entonces width mide el contenido, el relleno y el borde juntos. Una caja de 200 píxeles mide 200 de verdad.
Muchas hojas de estilo lo ponen para todos los elementos con el selector *. El margen sigue quedando fuera.
Una regla para todos los elementos
* {
box-sizing: border-box;
}Un error frecuente
Advertencia
Mucha gente cree que width es siempre el ancho total de la caja. Por defecto solo mide el contenido. El relleno y el borde se suman. Usa border-box si quieres que width sea lo que ves.
Flexbox reparte las cajas en una línea
Con display: flex en el padre, sus hijos se colocan en una fila. gap deja un hueco fijo entre ellos. justify-content reparte el espacio que sobra.
Flexbox piensa en una dimensión: una fila o una columna cada vez. Sirve para menús, barras y tarjetas en línea.
Tres platos en una fila con flexbox
.platos {
display: flex;
gap: 1rem;
justify-content: space-between;
}
<ul class="platos">
<li>Lentejas</li>
<li>Paella</li>
<li>Tortilla</li>
</ul>Grid reparte las cajas en filas y columnas
Con display: grid, el padre se divide en una cuadrícula. grid-template-columns dice cuántas columnas hay y cómo se reparten. La unidad 1fr es una parte del espacio libre.
Grid piensa en dos dimensiones, filas y columnas a la vez. Sirve para el esqueleto de una página o una galería.
Tres columnas del mismo ancho con grid
.platos {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1rem;
}Relleno y margen en la página del laboratorio
La hoja site/style.css usa relleno y margen en muchas reglas. Un grep con la opción -E busca dos palabras a la vez. Muestra 13 líneas, cada una con su número.
Mira las líneas 45 y 46, que son la tarjeta .dish: relleno y margen inferior. Y la línea 31, margin: 0 auto, que centra el bloque main en la pantalla.
Buscar relleno y margen en el CSS
docker exec jupyter grep -n -E "padding|margin" site/style.cssSe muestra aquí y no se ejecuta. Crea una cuenta gratuita para pulsar Ejecutar y escribirlo en el terminal de tu propio laboratorio.