Box Model & Spacing Cheatsheet

The Box Model

┌──────────────── margin ────────────────┐
│  ┌─────────────border─────────────┐    │
│  │  ┌────────padding────────┐     │    │
│  │  │                       │     │    │
│  │  │      CONTENT          │     │    │
│  │  │                       │     │    │
│  │  └───────────────────────┘     │    │
│  └────────────────────────────────┘    │
└────────────────────────────────────────┘

content-box (default, bad):  width = content only
border-box  (use this):      width = content + padding + border

Always add to your reset:

*, *::before, *::after { box-sizing: border-box; }

---

Margin & Padding Shorthand

Clockwise: Top → Right → Bottom → Left  (TRouBLe)

1 value:  all sides equal
2 values: top/bottom | left/right
3 values: top | left/right | bottom
4 values: top | right | bottom | left

Examples:
  margin: 1rem;                    → all 4 sides
  margin: 1rem 2rem;               → vertical | horizontal
  margin: 1rem 2rem 1.5rem;        → top | sides | bottom
  margin: 1rem 2rem 1.5rem 0;      → top | right | bottom | left

---

Logical Properties (Modern — Preferred)

Physical	Logical	Use When
margin-top + bottom	margin-block	Always prefer this
margin-left + right	margin-inline	Always prefer this
padding-top + bottom	padding-block	Always prefer this
padding-left + right	padding-inline	Always prefer this
width	inline-size	For RTL-aware projects
height	block-size	For RTL-aware projects
top/right/bottom/left: 0	inset: 0	Always prefer this

---

Sizing Keywords

Value	Behavior
auto	Browser calculates (fills available or fits content)
100%	100% of parent's size
fit-content	Shrinks to content, max = available space
min-content	Shrinks to smallest non-overflowing size
max-content	Expands to fit all content (no wrapping)
100vw	100% viewport width
100dvh	Dynamic viewport height (accounts for mobile browser bar)
clamp(min, ideal, max)	Fluid between floor and ceiling

---

Width / Height Patterns

/* Responsive container */
.o-container {
  width: min(100% - 2rem, 1200px);  /* Max 1200px, full-width with padding */
  margin-inline: auto;
}

/* Fluid width with minimum */
width: max(280px, 50%);

/* Lock aspect ratio */
aspect-ratio: 16 / 9;   /* Width × (9/16) = height */
aspect-ratio: 1;         /* Square */
aspect-ratio: 3 / 4;    /* Portrait */

/* Full viewport section */
min-height: 100dvh;  /* At minimum, full device viewport */

/* Content-driven grid column */
grid-template-columns: min-content 1fr;  /* Label: tight | Content: flexible */

---

Border Shorthand

border: <width> <style> <color>;
border: 1px solid var(--color-border);
border: none;
border: 0;        /* Same as none */

/* Individual sides */
border-top: 4px solid var(--color-primary);  /* Accent top */
border-inline-start: 4px solid var(--color-primary); /* RTL-safe left border */

/* Border radius */
border-radius: 8px;                    /* All corners */
border-radius: 1rem 1rem 0 0;          /* Top corners only */
border-radius: 50%;                    /* Circle */
border-radius: 9999px;                 /* Pill */

/* Outline (no layout effect — for focus rings) */
outline: 2px solid var(--color-primary);
outline-offset: 3px;

---

Overflow

Value	Behavior
visible	Content shows outside (default)
hidden	Clips at edge — also creates BFC (stops margin collapsing)
auto	Scrollbar only when needed ✅
scroll	Always shows scrollbar
clip	Clips like hidden but NO BFC — no scroll context

/* Scroll specific axis */
overflow-x: auto;     /* Horizontal scroll if needed */
overflow-y: hidden;   /* Clip vertical overflow */

/* Text truncation */
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Multi-line clamp */
.c-text-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

---

Margin Collapsing Quick Rules

Collapses (vertical margins only):
  ✅ Adjacent block siblings      → larger wins
  ✅ Parent + first/last child    → larger wins (if no separator)
  ✅ Empty element's own margins  → collapse to one

Doesn't collapse:
  ❌ Inside flex or grid containers
  ❌ When parent has padding or border
  ❌ overflow != visible
  ❌ Horizontal (left/right) margins — NEVER
  ❌ display: flow-root elements

Fix: display: flow-root on parent (cleanest — no side effects)

---

The display Property

Value	Creates
block	Block-level box, full width, new line
inline	Inline box, wraps in text
inline-block	Inline + block sizing
flex	Flex container
inline-flex	Inline flex container
grid	Grid container
inline-grid	Inline grid container
flow-root	Block + new BFC (stops margin collapsing)
none	Removes from layout and accessibility tree
contents	Element itself is invisible, children participate in parent layout
table / table-row / table-cell	Table-like behavior