0
Spacing
Spacing controla los márgenes y paddings del sistema mediante una escala consistente, útil para ajustes puntuales dentro de la composición.
Qué resuelve spacing
El módulo spacing reúne utilidades de margen y padding para resolver separaciones específicas sin alterar la lógica general de layout o rhythm.
Su función no es construir flujo interno como stack ni separar grandes bloques como section, sino permitir ajustes puntuales y controlados en el espacio de un elemento.
Escala del sistema
0.25rem
0.5rem
1rem
1.5rem
2rem
3rem
4rem
Sistema de margin
All
Aplica margin completo al elemento.
.m-0a.m-7
Axis
Aplica margin por eje horizontal o vertical.
.mx-0a.mx-7.my-0a.my-7
Directional
Aplica margin por lado específico.
.mt-0a.mt-7.mb-0a.mb-7.ml-0a.ml-7.mr-0a.mr-7
Uso
Margin se utiliza para separar externamente un elemento respecto a otros bloques cuando se requiere un ajuste puntual.
Sistema de padding
All
Aplica padding completo al contenedor.
.p-0a.p-7
Axis
Aplica padding por eje horizontal o vertical.
.px-0a.px-7.py-0a.py-7
Directional
Aplica padding por lado específico.
.pt-0a.pt-7.pb-0a.pb-7.pl-0a.pl-7.pr-0a.pr-7
Uso
Padding se utiliza para construir espacio interno dentro de un contenedor, card o bloque de contenido.
Ejemplos de uso
<div class="docs-card p-5">
...
</div><div class="mt-4">
...
</div><div class="px-4 py-3">
...
</div>Spacing vs stack vs section
Ajuste puntual
Se usa para resolver margin o padding específicos.
Flujo interno
Se usa dentro de un bloque para separar hijos verticalmente.
Ritmo macro
Se usa entre grandes bloques de una página.
Qué sí y qué no va en spacing
Qué sí debe contener
- Margin all, axis y directional.
- Padding all, axis y directional.
- Escala reutilizable basada en tokens.
- Utilidades puntuales de espacio.
Qué no debe contener
- Ritmo macro de página.
- Flujo interno repetible de componentes.
- Grid o flex helpers.
- Tipografía.
- Estilos de proyecto.
Siguiente paso
Continúa con align para revisar la composición flex del sistema.