Margin and Padding

Add margin and padding classes to set the required space between elements. Numbers refer to rem, which is based on the root font size.

• Formula: {p/m}-{v/h/t/b/l/r}-{value}
• Orientation: v vertical, h horizontal, t top, b bottom, l left, r right
• Values: 0, 1, 2, 3, 4 are whole rem steps; 1-16, 1-8, 1-4, 1-2, 3-4 are fractions of 1rem (1/16, 1/8, 1/4, 1/2, 3/4)
• Notes:
  • (two dashes) m-t-1 instead of mt-1 — increases readability, scalability, and ease of maintenance
  • (v/h) m-v-1 instead of (x/y) my-1 — mirrors CSS logical properties, so it stays adaptable across writing directions

Margin

• Add m0, m-1-16, m-1-8, m-1-4, m-1-2, m-3-4, m1 (1rem), m2, m3, m4 to set margin on all sides
• Add m-v-0 through m-v-4 (plus fractional m-v--1-16 … m-v--3-4) to set top and bottom margin
• Add m-h-0 through m-h-4 (plus fractional m-h--1-16 … m-h--3-4) to set left and right margin
• Add m-t-0 through m-t-4 (plus fractional m-t--1-16 … m-t--3-4) to set top margin only
• Add m-b-0 through m-b-4 (plus fractional m-b--1-16 … m-b--3-4) to set bottom margin only
• Add m-l-0 through m-l-4 (plus fractional m-l--1-16 … m-l--3-4) to set left margin only
• Add m-r-0 through m-r-4 (plus fractional m-r--1-16 … m-r--3-4) to set right margin only
• Add m-d-1, m-d-2 to add margin on desktop devices only (992px and up)
• Add m-auto, m-h-auto, m-v-auto for auto margin and centering content
• Add m-t-auto, m-b-auto, m-l-auto, m-r-auto for auto margin on a single side — the standard trick for pushing one flex or grid item to the edge of its container without extra markup, e.g. a "Sign out" link pinned to the right of a nav row with .row + m-l-auto

Negative Margin

• Add -m-1, -m-2, -m-3, -m-4 for negative margin on all sides
• Add -m-v-1 through -m-v-4 for negative top and bottom margin
• Add -m-h-1 through -m-h-4 for negative left and right margin
• Add -m-t-1 through -m-t-4 for negative top margin only
• Add -m-b-1 through -m-b-4 for negative bottom margin only
• Add -m-l-1 through -m-l-4 for negative left margin only
• Add -m-r-1 through -m-r-4 for negative right margin only
• Use these to intentionally pull an element outward — e.g. -m-t-2 to pull a card up over the hero image above it, or -m-h-2 to bleed a section past its container's padding

Padding

• Add p0, p-1-16, p-1-8, p-1-4, p-1-2, p-3-4, p1 (1rem), p2, p3, p4 to set padding on all sides
• Add p-v-0 through p-v-4 (plus fractional p-v--1-16 … p-v--3-4) to set top and bottom padding
• Add p-h-0 through p-h-4 (plus fractional p-h--1-16 … p-h--3-4) to set left and right padding
• Add p-t-0 through p-t-4 (plus fractional p-t--1-16 … p-t--3-4) to set top padding only
• Add p-b-0 through p-b-4 (plus fractional p-b--1-16 … p-b--3-4) to set bottom padding only
• Add p-l-0 through p-l-4 (plus fractional p-l--1-16 … p-l--3-4) to set left padding only
• Add p-r-0 through p-r-4 (plus fractional p-r--1-16 … p-r--3-4) to set right padding only
• Add p-d-1, p-d-2 to add padding on desktop devices only (992px and up)

Gap

• Add gap for the default gap value, or gap-1, gap-2, gap-3, gap-4 to set fluid gap spacing on flex or grid containers (e.g. .row, .grid)
• Add gap-v-1 through gap-v-4 to set row-gap only (vertical spacing between wrapped rows)
• Add gap-h-1 through gap-h-4 to set column-gap only (horizontal spacing between items in a row)
• Combine gap-v-* and gap-h-* on the same container to give rows and columns different spacing, or add either on top of gap/gap-1–gap-4 to override just one axis
• Note: on the .row/.col-* flex grid, gap classes only take effect on children that also have flex-shrink: 1 and min-width: 0 — the grid defaults to flex-shrink: 0 and min-width: auto, so gap alone can cause overflow. Add .col-gap to the row to opt in.

← Previous Next →