Margin

Margin controls the space outside an element — the space between it and other elements. Use it to separate sections and avoid clutter.

Usage

Use numbers to control spacing in simple steps.

• All sides: margin-0 to margin-99
• Per side: margin-top-0 to margin-top-99, margin-right-0 to margin-right-99, margin-bottom-0 to margin-bottom-99, margin-left-0 to margin-left-99

Numbers make the spacing bigger or smaller in simple steps, and they still scale with the screen.

Example

<div class="margin-6">
  <h2 class="margin-bottom-2">Title</h2>
  <p class="margin-top-12 margin-left-4">Paragraph with extra spacing.</p>
</div>

Valid values:

• Whole numbers only (0–99). Leading zeros are OK (margin-02 is the same as margin-2).
• Invalid examples: margin-100, margin-2.5, margin--1, margin-xx.