Spacing
Spacing in Nuvex UI is exposed through public utility classes for margin, padding, and gap. Use this page to inspect the helper syntax, preview the supported direction modifiers, and copy framework-ready examples built on the documented scale.
Usage
Preview margin and padding helpers against the framework spacing scale. Adjust direction and size to generate the exact classes used by the rendered example.
m-2p-4Class syntax
Spacing helpers combine a property prefix, an optional direction modifier, and a scale value. Use m-* for margin, p-* for padding, and directional variants when you want to scope the rule to a subset of sides.
All sides
Use m-{n} and p-{n} to apply spacing on all sides of an element.
Axis modifiers
Use mx-{n}, my-{n}, px-{n}, and py-{n} for horizontal or vertical spacing.
Side modifiers
Use mt-{n}, mr-{n}, mb-{n}, ml-{n} and the equivalent padding helpers for a single side.
Negative margin
Negative helpers are available only for margin, such as m-n2 and ml-n4.
Direction modifiers
Direction modifiers are shared across spacing helpers. When no modifier is present, the helper applies to all sides.
No suffix
Applies spacing to all sides, for example p-4 or m-2.
x
Applies to the horizontal axis: left and right.
y
Applies to the vertical axis: top and bottom.
t, r, b, l
Target a single side with t, r, b, or l.
Implementation examples
These examples show spacing helpers written directly in framework markup so the pattern can be copied into views and component templates.
Surface padding
Apply padding helpers directly to a content surface or card wrapper.
Section spacing
Use directional margin helpers to separate consecutive blocks of content.
Item gaps
Gap helpers belong to the same utility layer and work well for repeated inline or stacked children.
Framework notes
These notes document framework behavior that is useful when reading or generating spacing helpers in a Nuvex UI project.
- Spacing helpers are generated by the shared utility stylesheet rather than by individual components.
- The documented public scale for this page runs from 0 through 12.
- Margin helpers support negative values through the
nsuffix, such asm-n2andmx-n4. - Gap helpers follow the same numeric scale through
gap-{n},gap-x-{n}, andgap-y-{n}.