Box model

Every element lays out as a box: content, padding, border, margin. `box-sizing` changes whether width and height include padding and border.

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

.box {
  width: 200px;
  padding: 16px;
  border: 2px solid;
  /* border-box: total width stays 200px */
}
				

Margin collapse: adjacent vertical margins of block-level boxes can merge into one. Overflow (`hidden`, `auto`, `scroll`) creates scroll containers and may clip focus rings or establish formatting contexts.

Intrinsic sizing: min-content, max-content, and fit-content explain why flex items or grids refuse to shrink without `min-width: 0`.

On interviews: contrast content-box versus border-box, margin collapse rules, and overflow side effects.

The trade-off is content-box precision versus border-box predictability when sizing components.

Common pitfalls: fixed width plus padding overflows under content-box; `overflow: hidden` hides focus outlines and traps positioned descendants unexpectedly.

Checklist:

• Default to border-box for components.
• Account for padding and borders in sizing.
• Know when margins collapse.
• Treat overflow as layout behavior, not a clip hack.