Spacing

spacing is in two types which are:

Padding - is the space inside the element or in other word the space bettween the border and the element

Margin - is the space outside the element or in other word the space bettween other elements and the element itself

to define padding we use the p- prefix

<div class="bg-teal p-10">Padding 10px</div>
<div class="bg-teal p-20">Padding 20px</div>
<div class="bg-teal p-lg">Padding lg</div>
<div class="bg-teal p-xl">Padding xl</div>

to define margin we use the m- prefix

<div class="bg-purple m-10">Margin 10px</div>
<div class="bg-purple m-20">Margin 20px</div>
<div class="bg-purple m-lg">Margin lg</div>

you can also define margin and padding for specific sides

t - top
b - bottom
l - left
r - right

<div class="bg-red pt-20px pb-5px">Padding top 20px & bottom 5px</div>