Spacing

Margin

You also have a way to add margins simply with _margin

Exemple:

<div _margin="0">Margin 0</div>
<div _margin="1">Margin 1</div>
<div _margin="2">Margin 2</div>
<div _margin="3">Margin 3</div>
<div _margin="4">Margin 4</div>
<div _margin="5">Margin 5</div>
<div _margin="6">Margin 6</div>
<div _margin="7">Margin 7</div>
<div _margin="8">Margin 8</div>
<div _margin="9">Margin 9</div>
<div _margin="10">Margin 10</div>

Results:

Margin 0
Margin 1
Margin 2
Margin 3
Margin 4
Margin 5
Margin 6
Margin 7
Margin 8
Margin 9
Margin 10

You can precise the direction with the first letter prefix

Exemple:

<div _margin="l-5">Margin left 5</div>
<div _margin="t-5">Margin top 5</div>
<div _margin="r-5">Margin right 5</div>
<div _margin="b-5">Margin bottom 5</div>
Margin left 5
Margin top 5
Margin right 5
Margin bottom 5

Value Description
0..10 0 through 10 (or logic limitation)
l-0..10 left marge
r-0..10 right marge
t-0..10 top marge
b-0..10 bottom marge
x-0..10 left & right marge
y-0..10 top & down marge
md:0..10 breakpoints is available

Padding

Padding too with attribute _padding

Exemple:

<div _padding="0">Padding 0</div>
<div _padding="1">Padding 1</div>
<div _padding="2">Padding 2</div>
<div _padding="3">Padding 3</div>
<div _padding="4">Padding 4</div>
<div _padding="5">Padding 5</div>
<div _padding="6">Padding 6</div>
<div _padding="7">Padding 7</div>
<div _padding="8">Padding 8</div>
<div _padding="9">Padding 9</div>
<div _padding="10">Padding 10</div>

Results:

Padding 0
Padding 1
Padding 2
Padding 3
Padding 4
Padding 5
Padding 6
Padding 7
Padding 8
Padding 9
Padding 10

The value of the margin or padding is alway the value x5, so a margin 5 is a 25px marge.

You can precise the direction with the first letter prefix

Exemple:

<div _padding="l-5">Padding left 5</div>
<div _padding="t-5">Padding top 5</div>
<div _padding="r-5">Padding right 5</div>
<div _padding="b-5">Padding bottom 5</div>
Padding left 5
Padding top 5
Padding right 5
Padding bottom 5

Value Description
0..10 0 through 10 (or logic limitation)
l-0..10 left marge
r-0..10 right marge
t-0..10 top marge
b-0..10 bottom marge
x-0..10 left & right marge
y-0..10 top & down marge
md:0..10 breakpoints is available