ComboStrap Styling - Spacing (Margin, Padding)

About

spacing is the definition of the margin and padding between block component

where:

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

Example

Padding and Spacing on all sides

A note with:

• p-3: a padding with a scale value of 3 (blue color)
• m-5: 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>

Padding and Spacing on the start side

A note with:

• ps-3 means:
  • p: a padding (painted in blue)
  • s: at the start of the line (ie left in english)
  • -3: with a scale value of 3
• ms-5 means:
  • m: a margin (no color - transparent)
  • s: at the start of the line (ie left in english)
  • -5 with a scale value of 5

<note spacing="ps-3 ms-5">
A note with a padding and a margin only at the start of the line (ie ''left'' in english) - not at the right
</note>

Syntax

<component spacing="value" />

where value is:

{spaceType}[sides]-{size}

where:

• spaceType (mandatory) is the type of space
  • p for padding
  • m for margin
• sides (optional default to all sides) is
  • axis:
    • x (Left and right)
    • y (top & bottom)
  • position:
    • s: start (left for LTR or right for RTL language)
    • e: end (right for LTR or left for RTL language)
    • t: top
    • b: bottom
• size (mandatory) is 0,1,2,3,4 or 5 (based on size scale)

<component spacing="p-3-md" />

Support

Bootstrap 4 Notation Preserved

The l and r for left and right of Bootstrap 4 are translated to start and end

<note spacing="pl-3 ml-5">
The old notation ''l'' and ''r'' are still supported therefore ''pl-3 ml-5'' is equivalent to  ''ps-3 ms-5''
</note>