css

Margin & Padding
Color Presets

Weblutions CSSLibDocs > css > Margin & Padding

Margin & Padding

This page provides usage examples for all the available margin and padding utility classes in the CSS library.

🧱 Margin

Use margin classes to adjust spacing outside an element.

All Sides

<div class="m-auto">Margin auto</div>
<div class="m-0">No margin</div>
<div class="m-1">1rem margin</div>
<div class="m-4">4rem margin</div>

Horizontal (X-axis)

<div class="mx-1">1rem horizontal margin</div>
<div class="mx-10">10rem horizontal margin</div>

Vertical (Y-axis)

<div class="my-2">2rem vertical margin</div>
<div class="my-20">20rem vertical margin</div>

Individual Sides

<div class="ml-4">4rem left margin</div>
<div class="mr-5">5rem right margin</div>
<div class="mt-6">6rem top margin</div>
<div class="mb-8">8rem bottom margin</div>

📦 Padding

Use padding classes to adjust spacing inside an element.

All Sides

<div class="p-0">No padding</div>
<div class="p-2">2rem padding</div>
<div class="p-10">10rem padding</div>

Horizontal (X-axis)

<div class="px-05">0.5rem left & right padding</div>
<div class="px-16">16rem left & right padding</div>

Vertical (Y-axis)

<div class="py-1">1rem top & bottom padding</div>
<div class="py-20">20rem top & bottom padding</div>

Individual Sides

<div class="pt-4">4rem top padding</div>
<div class="pr-6">6rem right padding</div>
<div class="pb-8">8rem bottom padding</div>
<div class="pl-12">12rem left padding</div>

✅ Tip

• Use .m- and .p- for general layout control.
• Combine utilities for precise spacing control (e.g. mt-2 mb-4 px-1).
• Values like .m-025 and .p-04 give you finer control than traditional spacing scales.

Suggest an edit

Review this page

• Login