El modelo de caja en CSS define cómo se comporta cada etiqueta HTML como si fuera una caja con espacio interno, externo, contenido y bordes. Entender esta lógica te permite controlar el diseño de cualquier interfaz web con precisión, desde tarjetas hasta botones.
Qué es el modelo de caja en CSS
Cada elemento HTML se renderiza como una caja rectangular con cuatro zonas: contenido, padding, border y margin. Saber diferenciarlas es la base para maquetar sin sorpresas.
El contenido es el área que ocupa el texto o los elementos hijos, definido por width y height. Alrededor de ese contenido aparece el padding, que es el espacio interno entre el contenido y el borde. Luego viene el border, una línea perimetral configurable. Por fuera de todo está el margin, el espacio que separa la caja de otros elementos.
¿Cuál es la diferencia entre padding y margin? El padding es el espacio interno entre el contenido y el borde de la caja. El margin es el espacio externo que separa una caja de otra. El padding suma al tamaño total; el margin no.
Cómo afecta el padding al tamaño de la caja
Aquí viene lo interesante. Si defines un contenedor con width de 10 píxeles y height de 10 píxeles, y le agregas un padding de 10 píxeles, la caja final no medirá 10x10, sino 30x30. El padding suma a cada lado.
Ese comportamiento por defecto puede romper tus layouts. Por eso existe la propiedad box-sizing.
Cuándo usar box-sizing border-box
Cuando aplicas box-sizing: border-box, el navegador respeta el width y height que definiste y absorbe el padding y el border dentro de esas dimensiones. Es decir, si tu caja mide 100x100 con padding y borde, seguirá midiendo 100x100 en pantalla.
En la demo, una tarjeta con width 100px, height 100px, padding 10px y border 1px terminó midiendo 78x78 internamente. El navegador restó el padding y el borde para mantener el total en 100x100.
¿Qué hace box-sizing border-box? Indica al navegador que el width y height incluyan el padding y el border dentro del tamaño total, en vez de sumarlos por fuera.
Cómo aplicar margin para separar elementos
Cuando varias tarjetas se ven pegadas, el margin es la solución. A diferencia del padding, no modifica el tamaño total de la caja: solo crea aire entre elementos.
En la práctica de la clase, al duplicar varias tarjetas con la misma clase, se veían apiñadas. Bastó con añadir margin: 10px para generar separación visible entre ellas.
Cómo configurar la propiedad border
La propiedad border acepta tres valores en una sola línea:
- Tamaño del borde, por ejemplo
1px.
- Tipo o estilo, como
solid, dotted o dashed.
- Color, ya sea por nombre como
hotpink o en formato hexadecimal.
Un ejemplo completo sería border: 1px solid hotpink. Con eso defines grosor, estilo y color en una sola propiedad.
Cómo reutilizar estilos con clases en CSS
Una ventaja enorme aparece cuando defines una clase como .tarjeta-moquepon y la asignas a varios elementos con el atributo class. Todos heredan las mismas propiedades sin repetir código.
Esto se conecta con el truco de cambiar el display de un elemento inline como un label. Por defecto, los inline ignoran width y height. Al cambiar su display a block o inline-block, ya respetan esas dimensiones y puedes tratarlos como cajas completas.
css
.tarjeta-moquepon {
display: block;
width: 100px;
height: 100px;
padding: 10px;
margin: 10px;
border: 1px solid hotpink;
background: aquamarine;
box-sizing: border-box;
}
Con ese bloque tienes una tarjeta con fondo aguamarina, borde rosado, espacio interno y separación entre tarjetas, todo respetando un tamaño final de 100x100 píxeles.
Conceptos y habilidades clave de la clase
A lo largo de la práctica aparecen varios conceptos que conviene tener claros para avanzar en CSS.
- Modelo de caja [00:14]: estructura de cuatro capas que define cómo se dibuja cada elemento HTML.
- Padding [01:05]: espacio interno entre el contenido y el borde, que suma al tamaño total por defecto.
- Margin [02:13]: espacio externo entre cajas, no afecta el tamaño total del elemento.
- Border [05:25]: línea perimetral con tres valores; tamaño, estilo y color.
- Box-sizing border-box [04:24]: propiedad que evita que padding y border aumenten el tamaño definido.
- Display [03:19]: propiedad que cambia el comportamiento de un elemento entre inline y block.
- Selector de clase [04:48]: permite reutilizar estilos en múltiples elementos HTML.
- Inspector del navegador [03:08]: herramienta para ver en tiempo real las dimensiones del modelo de caja.
Ahora viene tu turno. Crea un botón con color de fondo, width, height, borde y espaciado interno y externo. Comparte tu solución en los comentarios y nos leemos en la siguiente clase.
