layout trained

A layout is a tree of two kinds of nodes. Containers arrange their children: flow, flex or grid, plus gap. Leaves own their padding: the distance between their content and their own edge. Every spacing problem is answered by asking one question: is this node arranging, or is it insetting? If a rule seems to need a negative margin, the rule is being applied to the wrong node.

Worked verdicts, one per recurring argument:

• When text wraps inline elements, the paragraph is the leaf (see rulings).
• In icon + label + badge rows, the row is the leaf, not the list (see rulings).
• Grid gutters are gap on the grid, never margins on cells (see rulings).
• When a focus ring clips, inset the focus, not the layout (see rulings).
• With scroll snap and gutter space, the scroller is the leaf (see rulings).
• Collapsible panels animate their padding with the panel, not the page (see rulings).
• When a fill holds a lone leaf, the fill stays a container (see rulings).

• every case on leaf padding, A against B, with the inspector.
• forms, wizards and inline edit in form layouts.
• shells, content grids and mechanics in layouts, content and mechanics.

Practiced case by case: the settings card, the selectable list, the media card, the data table, page color bands, the sidebar, the scroll area, the dropdown, the modal, and the change-cost diff. Each was rebuilt from the padded A-side to the leaf-only B-side until the second one came out right the first time.