ComboStrap Styling - Spacing (Margin, Padding)

About

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
    • 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
  • 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

Documentation / Reference

Powered by ComboStrap