Margins & Paddings

Atomic classes for controlling element spacing using Foundation CSS spacing units. These utilities help create consistent layouts and reduce the need for custom CSS.

Margin

Immutable margin utilities based on Foundation CSS spacing units. These classes help maintain consistency and avoid magic numbers in your stylesheets.

Important: Margin should never be declared outside of these utilities. If the default spacing scale doesn't suit your design, customize and extend it before use.

Margin Class Abbreviations

Abbreviation	Definition	Responsive?
`m`	margin	Y
`mt`	margin-top	Y
`mr`	margin-right	Y
`mb`	margin-bottom	Y
`ml`	margin-left	Y
`mx`	margin x-axis (left, right)	Y
`my`	margin y-axis (top, bottom)	Y
`m-auto`	margin auto (all directions)	Y
`mt-auto`	margin-top auto	Y
`mr-auto`	margin-right auto	Y
`mb-auto`	margin-bottom auto	Y
`ml-auto`	margin-left auto	Y
`mx-auto`	margin x-axis auto	Y

Margin Classes

Class	CSS	Size	Responsive?
`.m0`	`margin: 0;`	0 SU	Y
`.m1`	`margin: 0.25rem;`	1 SU / 4px	Y
`.m2`	`margin: 0.5rem;`	2 SU / 8px	Y
`.m3`	`margin: 0.75rem;`	3 SU / 12px	Y
`.m4`	`margin: 1rem;`	4 SU / 16px	Y
`.m5`	`margin: 1.25rem;`	5 SU / 20px	Y
`.m6`	`margin: 1.5rem;`	6 SU / 24px	Y
`.m7`	`margin: 2rem;`	7 SU / 32px	Y
`.m8`	`margin: 2.5rem;`	8 SU / 40px	Y
`.m9`	`margin: 3rem;`	9 SU / 48px	Y
`.m10`	`margin: 3.5rem;`	10 SU / 56px	Y
`.m11`	`margin: 4rem;`	11 SU / 64px	Y
`.m12`	`margin: 4.5rem;`	12 SU / 72px	Y
`.m13`	`margin: 5rem;`	13 SU / 80px	Y
`.m14`	`margin: 7.5rem;`	14 SU / 120px	Y
`.m15`	`margin: 10rem;`	15 SU / 160px	Y
`.m16`	`margin: 12.5rem;`	16 SU / 200px	Y

Negative Margin Classes

Class	CSS	Size	Responsive?
`.mn1`	`margin: -0.25rem;`	-1 SU / -4px	Y
`.mn2`	`margin: -0.5rem;`	-2 SU / -8px	Y
`.mn3`	`margin: -0.75rem;`	-3 SU / -12px	Y
`.mn4`	`margin: -1rem;`	-4 SU / -16px	Y
`.mn5`	`margin: -1.25rem;`	-5 SU / -20px	Y
`.mn6`	`margin: -1.5rem;`	-6 SU / -24px	Y
`.mn7`	`margin: -2rem;`	-7 SU / -32px	Y
`.mn8`	`margin: -2.5rem;`	-8 SU / -40px	Y
`.mn9`	`margin: -3rem;`	-9 SU / -48px	Y
`.mn10`	`margin: -3.5rem;`	-10 SU / -56px	Y
`.mn11`	`margin: -4rem;`	-11 SU / -64px	Y
`.mn12`	`margin: -4.5rem;`	-12 SU / -72px	Y
`.mn13`	`margin: -5rem;`	-13 SU / -80px	Y
`.mn14`	`margin: -7.5rem;`	-14 SU / -120px	Y
`.mn15`	`margin: -10rem;`	-15 SU / -160px	Y
`.mn16`	`margin: -12.5rem;`	-16 SU / -200px	Y

Margin Examples

.m2

.m4

.m6

Different margins

.mx-auto

.mn4 (negative)

.mn6 (negative)

Padding

Immutable padding utilities based on Foundation CSS spacing units. These classes provide consistent internal spacing for elements.

Important: Padding should never be declared outside of these utilities. This ensures consistency and avoids magic numbers in your stylesheets.

Padding Class Abbreviations

Abbreviation	Definition	Responsive?
`p`	padding	Y
`pt`	padding-top	Y
`pr`	padding-right	Y
`pb`	padding-bottom	Y
`pl`	padding-left	Y
`px`	padding x-axis (left, right)	Y
`py`	padding y-axis (top, bottom)	Y

Padding Classes

Class	CSS	Size	Responsive?
`.p0`	`padding: 0;`	0 SU	Y
`.p1`	`padding: 0.25rem;`	1 SU / 4px	Y
`.p2`	`padding: 0.5rem;`	2 SU / 8px	Y
`.p3`	`padding: 0.75rem;`	3 SU / 12px	Y
`.p4`	`padding: 1rem;`	4 SU / 16px	Y
`.p5`	`padding: 1.25rem;`	5 SU / 20px	Y
`.p6`	`padding: 1.5rem;`	6 SU / 24px	Y
`.p7`	`padding: 2rem;`	7 SU / 32px	Y
`.p8`	`padding: 2.5rem;`	8 SU / 40px	Y
`.p9`	`padding: 3rem;`	9 SU / 48px	Y
`.p10`	`padding: 3.5rem;`	10 SU / 56px	Y
`.p11`	`padding: 4rem;`	11 SU / 64px	Y
`.p12`	`padding: 4.5rem;`	12 SU / 72px	Y
`.p13`	`padding: 5rem;`	13 SU / 80px	Y
`.p14`	`padding: 7.5rem;`	14 SU / 120px	Y
`.p15`	`padding: 10rem;`	15 SU / 160px	Y
`.p16`	`padding: 12.5rem;`	16 SU / 200px	Y

Padding Examples

.p2

.p4

.p6

Different paddings

.px4 .py2

Usage Examples

Card Component with Spacing

<div class="bg-white bs-md bar-lg p6 mb4">
  <h3 class="fs-h3 fw-bold mb3">Card Title</h3>
  <p class="fc-light-700 mb4">Card content with consistent spacing.</p>
  <button class="btn btn--primary">Action</button>
</div>

Responsive Layout with Auto Margins

<div class="d-flex fd-column sm:fd-row g4">
  <aside class="ws3 bg-light p4">
    <!-- Sidebar content -->
  </aside>
  <main class="fl1 p4 mx-auto wmx8">
    <!-- Main content with auto margins and max width -->
  </main>
</div>

Overlapping Elements with Negative Margins

<div class="bg-blue p6">
  <div class="bg-white p4 mn4 bar-md">
    <!-- Content overlapping with negative margin -->
  </div>
</div>

Button with Consistent Padding

<button class="
  d-inline-flex ai-center jc-center
  bg-blue fc-white
  px6 py3
  bar-sm fw-500
  h:bg-blue-600
">
  Click Me
</button>

Responsive Spacing

<section class="p4 sm:p6 md:p8 lg:p10">
  <!-- Padding increases with screen size -->
  <div class="mb4 sm:mb6 md:mb8">
    <!-- Margin bottom increases with screen size -->
  </div>
</section>

Best Practices

✅ Do

• Use spacing units consistently throughout your design
• Combine margin and padding classes for complex layouts
• Use auto margins for centering and flex layouts
• Apply responsive spacing with conditional classes
• Use negative margins for overlapping elements
• Consider the spacing scale when designing components

❌ Don't

• Mix spacing units with custom CSS values
• Use negative margins without understanding the layout
• Apply excessive spacing that breaks visual hierarchy
• Ignore responsive considerations for spacing
• Use auto margins without proper container setup
• Create inconsistent spacing patterns

Spacing Guidelines

When to Use Each Spacing Unit

1-2 SU: Fine adjustments, component internal spacing
3-4 SU: Standard spacing between elements
5-6 SU: Section spacing, card padding
7-8 SU: Large component spacing
9+ SU: Page-level spacing, major sections

Conditional Classes

All margin and padding classes support responsive breakpoints and state modifiers:

Responsive Examples

<!-- Different padding at different breakpoints -->
<div class="p2 sm:p4 md:p6 lg:p8">
  <!-- 8px on mobile, 16px on tablet, 24px on desktop, 32px on large screens -->
</div>

<!-- Different margins for different screen sizes -->
<div class="mb2 sm:mb4 md:mb6">
  <!-- Bottom margin increases with screen size -->
</div>

State Modifiers

<!-- Hover effects with spacing -->
<button class="p3 h:p4 t">
  <!-- Padding increases on hover -->
</button>

<!-- Focus states with margins -->
<input class="p3 f:mx2">
  <!-- Horizontal margin on focus -->
</input>