@moodxd/utility-space v1.0.3

MoO Utility Space (Margin and Padding)

The Space classes add margin and padding to an element. Space classes follow a pattern (u-[sm/md/lg-][m/p][T/B/L/R/V/H/A][0/1-25]), which allows for breakpoint, property, direction and width of property.

• The property [m/p] defines whether the class is using margin or padding
• The direction [T/B/L/R/V/H/A] defines which direction of the margin or padding property, either top, bottom, left, right, vertical (top and bottom), horizontal (left and right) or all (top, bottom, left and right)
• The width [0/1-25] defines the width of the padding or margin. The number used is a multiplier of 4. For example, 4x4 equals 16px or 1.6rem
• The breakpoint add-ons allow for different spacing at different breakpoints. For example, u-pR10 u-md-pR12 u-lg-pR4, would change the padding right at the medium and large breakpoints

Best practice: Keep all Space classes near each other and in their breakpoint order. This helps to visually understand the spacing properties and at what breakpoints they are being added to an element.