Los 5 errores de espaciado en CSS que encuentro en casi todos los sitios web

La mayoría de las personas no sabe decirte por qué un sitio web parece barato. Simplemente lo perciben. La mayoría de las veces, el culpable no es el color ni la tipografía — es el espaciado. Márgenes inconsistentes, rellenos dispares, un ritmo que se desvía a medida que te desplazas.

Estos son los cinco errores de espaciado que encuentro en casi todos los sitios, y cómo detectarlos rápido.

1. Elementos hermanos con espaciado distinto

Tres tarjetas en fila. Dos tienen margin-bottom: 24px y una tiene margin-bottom: 20px porque alguien la ajustó una vez y nunca volvió. Individualmente es invisible. En conjunto, la cuadrícula se siente sutilmente rota.

La solución es una escala de espaciado — un conjunto fijo de valores (4, 8, 16, 24, 32…) — y la disciplina de no usar nunca un número que no esté en ella.

2. Números mágicos por todas partes

margin-top: 13px. padding: 7px 19px. ¿De dónde salieron? Nadie lo sabe. Son el resultado de empujar las cosas hasta que “se veían bien” en un viewport específico.

Los números mágicos son la forma en que mueren los sistemas de espaciado. Cada uno que agregas hace que la siguiente inconsistencia sea más fácil de justificar.

3. Un ritmo vertical que se desvía

La sección uno tiene padding: 80px 0. La sección dos tiene padding: 64px 0 porque “parecía demasiado”. Ahora la página respira de forma irregular, y el ojo lo nota aunque el cerebro no lo haga.

Elige un ritmo de sección y mantenlo. La consistencia se lee como algo intencional; la variación se lee como descuido.

4. El relleno haciendo el trabajo del margen (y viceversa)

Usar padding para alejar un elemento de su vecino, o margin para crear espacio interno, genera un espaciado que se colapsa o se duplica de formas exasperantes de depurar. El margen es el espacio fuera de la caja. El relleno es el espacio dentro de ella. Tener eso claro evita toda una categoría de errores.

5. La sorpresa del colapso de márgenes

Dos elementos apilados, cada uno con margin: 20px, y el espacio entre ellos es… 20px, no 40px. El colapso de márgenes es un comportamiento correcto de CSS, pero sorprende a la gente constantemente y hace que el espaciado se sienta impredecible.

Cómo detectar esto de verdad

Aquí está el problema: no puedes ver el espaciado. El margen y el relleno son invisibles. Puedes mirar un diseño durante una hora y no darte cuenta de que dos tarjetas están desfasadas por 4px.

Por eso DevTools tiene un inspector del modelo de caja — y por eso PxGuard pone uno directamente en la página. Pasa el cursor sobre cualquier elemento y sus márgenes, rellenos y dimensiones exactas se iluminan en una superposición con código de colores. Las inconsistencias que eran invisibles se vuelven obvias en una sola pasada.

El espaciado es la forma más barata de hacer que un sitio parezca caro. Solo tienes que poder verlo.

Inspecciona tu espaciado gratis →