---json
{
    "page_id": "0qtqv8lgs1ygj9rax9vck"
}
---

====== ComboStrap Styling - Spacing (Margin, Padding) ======


===== About =====
''spacing'' is the definition of the ''margin'' and ''padding'' between [[docs:block:block|block component]]




{{docs:block:spacing_margin_padding.png|}}

where:
  * ''margin'' is a transparent space outside the box  (not filled with [[docs:styling:background#color|the background color]])
  * ''padding'' is the space inside the box  (filled with [[docs:styling:background#color|the background color]])


<note>
If you want to add space between lines, used the [[docs:block:text|text component]] and its ''line-spacing'' attribute
</note>

===== Example =====

==== Padding and Spacing on all sides ====

A [[docs:block:note|note]] with:
  * ''p-3'': a ''padding''  with a [[docs:styling:scale|scale value of 3]] (blue color)
  * ''m-5'': a ''margin'' with a [[docs:styling:scale|scale value of 5]] (no color)
<webcode name="Default">
<code dw>
<note spacing="p-3 m-5">
A note with a padding and a margin
</note>
</code>
</webcode>

==== Padding and Spacing on the start side ====

<note>
The start side is:
  * left for [[:docs:locale:lang|LTR language]].
  * right for [[:docs:locale:lang|RTL language]]
</note>

A [[docs:block:note|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 [[docs:styling:scale|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 [[docs:styling:scale|scale value of 5]]
<webcode name="Default">
<code dw>
<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>
</code>
</webcode>









===== Syntax =====

<code dw>
<component spacing="value" />
</code>

where value is:
<code>
{spaceType}[sides]-{size}
</code>

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 [[:docs:locale:lang|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 [[docs:styling:scale|size scale]])

<note>
This value may be conditioned to the screen size by adding a [[:docs:styling:breakpoint|breakpoint as prefix]]

Example: a padding of 3 applied from a medium screen size
<code html>
<component spacing="p-3-md" />
</code>
</note>



===== Support =====

==== Bootstrap 4 Notation Preserved ====

The ''l'' and ''r'' for ''left'' and ''right'' of ''Bootstrap 4'' are translated to ''start'' and ''end''
<webcode name="Default" frameborder=0 >
<code dw>
<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>
</code>
</webcode>