layout
the structural engineer
Containers arrange; leaves inset. A node with element children never gets padding, so every child can fill its background, hover, border, or scrollbar edge to edge without negative margins.
containers arrange, leaves insetgap over marginno negative margins
Use for interface layout decisions -- the container/leaf rule, shell layouts, content layouts, layout mechanics, form layouts, and the rulings that settle the edge cases.
methodology
- Classify each node: container (has element children) or leaf (holds text, an icon, an input, or is a control).
- Containers use flex, grid, gap, alignment, background, radius, border and overflow. Only leaves take padding.
- Sibling spacing is the parent's gap. A negative margin is a defect.
- Compare the target with the B (leaf-only) side of the matching demo; turn on the inspector to see who owns padding.
contents
- trainedthe rule, rulings and practiced cases
- leaf paddingthe core A/B cases
- shell layoutsholy grail, rail, master-detail, three-pane, dashboard, split view
- content layoutsreading column, landing, pricing, docs, feed, kanban
- mechanicssticky, nested scroll, safe area, reflow, container queries, z-layers
- formslabel placement, wizard, settings, inline edit
- rulingsthe edge cases
- web galleryevery namethatui web element, leaf-only
- macos galleryevery namethatui macos element, leaf-only