El modelo de caja de CSS es la regla que dice que cada elemento de tu página es una caja rectangular con cuatro capas: contenido, relleno, borde y margen.
¿Sabías que el 80% de los errores de diseño web tienen la misma causa? El espacio no está bien calculado. Aprender el modelo de caja te va a salvar horas de frustración.
Todo es una caja
Abre cualquier página web. Ves textos, imágenes, botones, menús. Para CSS, todo eso son cajas apiladas unas junto a otras.
Cada caja tiene cuatro capas que trabajan juntas:
- Contenido: el texto o la imagen que está adentro.
- Relleno (padding): el espacio entre el contenido y el borde.
- Borde (border): la línea que rodea la caja.
- Margen (margin): el espacio entre esa caja y las demás.
Piénsalo como una caja de Bimbo en el supermercado. El pan es el contenido. El plástico que lo envuelve es el relleno. La caja de cartón es el borde. El espacio entre esa caja y las otras en el anaquel es el margen.
La historia de Rodrigo y su tienda en línea
Rodrigo tiene 24 años y vive en Monterrey. Abrió una tienda en línea para vender accesorios de cocina. Usó HTML para poner sus productos y CSS para los colores. Pero algo se veía mal: todo estaba pegado, sin espacio, como si los elementos se aplastaran entre sí.
Rodrigo no sabía del modelo de caja. Pensó que el problema era el color o la fuente. Pasó dos días cambiando cosas que no eran.
Cuando aprendió sobre padding y margin, todo cambió en 10 minutos.
Así se veía su CSS antes:
.producto {
background-color: #f5f5f5;
font-size: 16px;
}
Y así quedó después:
.producto {
background-color: #f5f5f5;
font-size: 16px;
padding: 16px;
margin: 12px;
border: 1px solid #cccccc;
}
Con esos tres cambios, cada producto tuvo su propio espacio. La tienda de Rodrigo pasó de verse amateur a verse profesional.
Cómo escribir padding y margin
Puedes escribir estas propiedades de varias formas. Aquí están las más comunes:
Un solo valor — aplica igual a los cuatro lados:
padding: 20px;
margin: 10px;
Dos valores — el primero es arriba/abajo, el segundo es izquierda/derecha:
padding: 10px 20px;
margin: 8px 16px;
Cuatro valores — en orden: arriba, derecha, abajo, izquierda (como las manecillas del reloj):
padding: 10px 20px 10px 20px;
margin: 5px 10px 5px 10px;
Por lado individual — cuando quieres controlar exactamente uno:
padding-top: 10px;
padding-right: 20px;
margin-bottom: 8px;
margin-left: 0;
Esta flexibilidad te da un control enorme sobre el espacio de tu página.
La historia de Fernanda y el banner de Liverpool
Fernanda estudia diseño web en Guadalajara. En su primer proyecto, tenía que recrear un banner de oferta al estilo de Liverpool. El diseño pedía un botón con el texto "Ver oferta" centrado, con espacio interno y un borde redondeado.
Ella sabía cómo cambiar colores. Pero el botón le quedaba así: el texto pegado a los bordes, sin respirar.
Su maestra le explicó: "El padding es el que le da comodidad al texto adentro del botón."
Fernanda aplicó esto:
.boton-oferta {
background-color: #cc0000;
color: #ffffff;
font-size: 14px;
padding: 12px 24px;
border: none;
border-radius: 6px;
margin-top: 20px;
}
El resultado fue exactamente lo que el diseño pedía. El texto tenía espacio adentro (padding). El botón tenía distancia hacia arriba (margin-top). Y el borde redondeado hizo que se viera moderno.
Fernanda entendió algo ese día: el padding es para adentro de la caja, el margin es para afuera.
El borde: más que una línea
El borde tiene tres partes que debes definir juntas:
border: grosor estilo color;
Por ejemplo:
border: 2px solid #333333;
Los estilos más comunes son:
solid— línea sólida.dashed— línea punteada con guiones.dotted— puntos.none— sin borde.
También puedes poner borde solo en un lado:
border-bottom: 3px solid #e63946;
Eso es muy útil para líneas decorativas debajo de títulos, como las que ves en sitios como Mercado Libre para separar secciones.
box-sizing: la propiedad que todos olvidan
Aquí viene algo importante. Por defecto, cuando escribes width: 200px, CSS aplica ese ancho solo al contenido. El padding y el border se suman por fuera.
Eso causa confusión. Si tienes una caja de 200px con 20px de padding a cada lado, la caja real mide 240px. No los 200px que esperabas.
La solución es esta línea que los desarrolladores ponen en todos sus proyectos:
* {
box-sizing: border-box;
}
Con border-box, el width ya incluye el padding y el border. Lo que escribes es lo que obtienes. Siempre ponla al inicio de tu CSS.
La historia de Tomás y el carrito de compras
Tomás trabaja como freelance en CDMX. Un cliente con una tienda en línea le pidió hacer una sección de carrito de compras. Cada producto debía ocupar exactamente la mitad del ancho de la pantalla, lado a lado.
Tomás escribió:
.producto {
width: 50%;
padding: 20px;
}
Pero los productos no cabían juntos. Uno bajaba a la siguiente línea. Tomás revisó el código tres veces. Todo parecía correcto.
El problema era que sin box-sizing: border-box, cada producto medía 50% más 40px de padding. Sumaban más del 100%.
La solución fue agregar al inicio de su CSS:
* {
box-sizing: border-box;
}
Listo. Los dos productos quedaron perfectamente lado a lado. El cliente quedó contento y Tomás aprendió a poner esa línea en cada proyecto nuevo.
Errores comunes al usar el modelo de caja
Confundir padding con margin. El padding es espacio adentro de la caja. El margin es espacio afuera. Si quieres separar dos elementos, usa margin. Si quieres que el contenido no toque el borde, usa padding.
Olvidar box-sizing: border-box. Sin esta línea, tus anchos no van a coincidir con lo que esperas. Ponla siempre al inicio.
Poner margin y padding sin unidad. Escribir margin: 10 no funciona. Siempre agrega la unidad: margin: 10px.
Usar margin para centrar texto. El margin no centra texto. Para centrar texto usa text-align: center en CSS. Para centrar una caja horizontalmente usa margin: 0 auto junto con un width definido.
Visualiza el modelo de caja en tu navegador
Chrome y Firefox tienen una herramienta muy útil. Haz clic derecho sobre cualquier elemento en tu página. Elige "Inspeccionar". En la pestaña de estilos verás un diagrama del modelo de caja con los valores exactos de margin, border, padding y contenido.
Úsala siempre que algo no se vea como esperas. Es tu mejor aliada para depurar problemas de espacio.
Lo que aprendiste hoy
El modelo de caja es la base de todo el diseño web. Sin entenderlo, puedes cambiar colores y fuentes, pero nunca vas a controlar el espacio. Con él, puedes construir cualquier layout que imagines.