Spacing
El spacing en Nuvex UI se expone mediante clases publicas para margin, padding y gap. Usa esta pagina para inspeccionar la sintaxis de los helpers, revisar los modificadores de direccion soportados y copiar ejemplos listos para el framework basados en la escala documentada.
Uso
Previsualiza los helpers de margin y padding contra la escala de spacing del framework. Ajusta direccion y tamano para generar las clases exactas usadas por el ejemplo renderizado.
m-2p-4Sintaxis de clases
Los helpers de spacing combinan un prefijo de propiedad, un modificador de direccion opcional y un valor de escala. Usa m-* para margin, p-* para padding y variantes direccionales cuando quieras acotar la regla a un subconjunto de lados.
Todos los lados
Usa m-{n} y p-{n} para aplicar spacing en todos los lados de un elemento.
Modificadores por eje
Usa mx-{n}, my-{n}, px-{n} y py-{n} para spacing horizontal o vertical.
Modificadores por lado
Usa mt-{n}, mr-{n}, mb-{n}, ml-{n} y los helpers equivalentes de padding para un solo lado.
Margin negativo
Los helpers negativos existen solo para margin, como m-n2 y ml-n4.
Modificadores de direccion
Los modificadores de direccion se comparten entre los helpers de spacing. Cuando no hay modificador, el helper aplica a todos los lados.
Sin sufijo
Aplica spacing a todos los lados, por ejemplo p-4 o m-2.
x
Aplica sobre el eje horizontal: izquierda y derecha.
y
Aplica sobre el eje vertical: superior e inferior.
t, r, b, l
Apunta a un solo lado con t, r, b o l.
Ejemplos de implementacion
Estos ejemplos muestran helpers de spacing escritos directamente en markup del framework para que el patron pueda copiarse a vistas y templates de componentes.
Padding de superficie
Aplica helpers de padding directamente sobre una superficie de contenido o un wrapper de card.
Separacion de secciones
Usa helpers direccionales de margin para separar bloques consecutivos de contenido.
Gaps entre items
Los helpers de gap pertenecen a la misma capa utilitaria y funcionan bien para hijos repetidos en linea o en stack.
Notas del framework
Estas notas documentan comportamiento del framework util al leer o generar helpers de spacing dentro de un proyecto Nuvex UI.
- Los helpers de spacing se generan desde la hoja de utilidades compartida y no desde componentes individuales.
- La escala publica documentada en esta pagina va de 0 a 12.
- Los helpers de margin soportan valores negativos mediante el sufijo
n, comom-n2ymx-n4. - Los helpers de gap siguen la misma escala numerica mediante
gap-{n},gap-x-{n}ygap-y-{n}.