ComboStrap Styling - Spacing (Margin, Padding)

spacing is the definition of the margin and padding of a UI component via the definition of a spacing class name

where:

• margin is a transparent space outside the box (not filled with color)
• padding is the space inside the box (filled with color)

A note with:

• a padding with a scale value of 3 (blue color)
• a margin with a scale value of 5 (no color)

<note spacing="p-3 m-5">
A note with a padding and a margin
</note>

The spacing class name implements the Bootstrap spacing convention.

• For extra-small (xs) breakpoint

{spaceType}{sides}-{size}

• For the other

{spaceType}{sides}-{breakpoint}-{size}

where:

• spaceType is
  • p for padding
  • m for margin
• sides is:
  • axis:
    • x (Left and right)
    • y (top & bottom)
  • position:
    • l: left
    • r: right
    • t: top
    • b: bottom
• breakpoint is the Breakpoint (Toggle size) : xs, sm, md, lg
• size is 0,1,2,3,4 or 5 (based on size scale)

• Bootstrap Spacing.