PrimeFlex provides various spacing utilities to modify an element's layout.
The spacing classes use the {property}{position}-{value} syntax whereas for responsive values {breakpoint}:{property}{position}-{value} format is used.
Property can either be a margin or a padding.
Position are available for the individual sides, the x-y axis or blank for the shortand of all sides.
Value field varies from 0 to 6 where default value of the $spacer is 1rem. The special auto value is available to margins only and used to center elements.
Breakpoints define how the spacing should be defined depending on the screen size. Design is mobile first so smaller values can also apply to larger values e.g. md also applies to lg or xl if they are not explicitly defined.
Spacing is a handy utility when elements wrap when screen size get smaller. In example below, when buttons wrap they are displayed on top of each other whereas with spacing this issue can easily be resolved.
Spacing utilities also work seamlessly with responsive PrimeFlex grid utilty. Example below demonstrates a case where on a smaller screen inputs receive a margin to position themselves separately in stacked mode, reduce the dimension of the window to view the difference.