ComboStrap Styling - Spacing (Margin, Padding)

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

where:

If you want to add space between lines, used the text component and its line-spacing attribute

Example

Padding and Spacing on all sides

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

Padding and Spacing on the start (old left) 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>


A note with a padding and a margin only at the start of the line (ie left in english) - not at the right

Syntax

spacing="value"


where value is:

{spaceType}[sides][-{breakpoint}]-{size}


where:

• spaceType (mandatory) is the type of space
• 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
• breakpoint (optional, default to xs) is the Breakpoint (Toggle size) : xs, sm, md, lg
• size (mandatory) is 0,1,2,3,4 or 5 (based on size scale)

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>


The old notation l and r are still supported therefore pl-3 ml-5 is equivalent to ps-3 ms-5

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 menubar