ComboStrap Styling - Spacing (Margin, Padding)

Table of Contents

1 - About

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)

3 - Example

A note with: 

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

4 - Spacing Class Name

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)

For the geek

The margin properties can utilize negative values but padding cannot and that's how the top of the page is defined in a fixed-top navbar

5 - Documentation / Reference