Blocks

Group elements

Use small 4-32px spacing to group elements together. Graphic element or texts that are close to each other looks related.

Separate elements

Use larger spacing (40px and higher) to separate elements from each other. Graphic element or texts that are far from each other looks a part. Use larger spacing to separate larger elements.

Padding position classes (CSS)

<div class="ayode-p-16">This div has 16px padding.</div>
<div class="ayode-px-8">This div has 8px horizontal padding.</div>
<div class="ayode-py-24">This div has 24px vertical padding.</div>

Margin position classes (CSS)

<div class="ayode-m-16">This div has 16px margin.</div>
<div class="ayode-mx-8">This div has 8px horizontal margin.</div>
<div class="ayode-my-24">This div has 24px vertical margin.</div>