Margin Utility Classes

Bellow is a Demonstration of How Margin Utility Classes Works

These examples demonstrate how margin properties affect element spacing.

All-around margin (m-*)
Margin applied equally to all sides
m-0
m-1
m-2
m-4
m-8
Directional margin (mt-*, mr-*, mb-*, ml-*)
Margin applied to specific sides

Top Margin (mt-*)

mt-0
mt-1
mt-2
mt-4
mt-8

Right Margin (mr-*)

mr-0
mr-1
mr-2
mr-4
mr-8

Bottom Margin (mb-*)

mb-0
mb-1
mb-2
mb-4
mb-8

Left Margin (ml-*)

ml-0
ml-1
ml-2
ml-4
ml-8
Axis margin (mx-*, my-*)
Margin applied to horizontal or vertical axes

Horizontal Margin (mx-*)

mx-0
mx-1
mx-2
mx-4
mx-8

Vertical Margin (my-*)

my-0
my-1
my-2
my-4
my-8
Combined Margin Example
Different margin values applied to each side
mt-8
mr-4
mb-2
ml-1
mt-1
mr-8
mb-4
ml-2
Margin Visual Comparison

No Margin

Content

With Margin

Content
Important Notes
  • Margin creates space outside an element, between it and other elements
  • Unlike padding, margin is not part of the element's click/tap area
  • Margin does not affect the element's dimensions (width/height)
  • Negative margin values are valid and can pull elements closer together
  • Margin collapsing occurs when vertical margins of adjacent elements overlap
  • Axis margins (mx-*, my-*) provide shorthand for horizontal/vertical spacing