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:
2 - Articles Related
3 - Example
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>
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)