CSS margin and padding shorthands: know which edge a value reaches

When to use it

A payment panel needs one amount of internal padding and a larger gap before the next section. Use padding for space inside its border and margin-block for space outside it. A physical four-value shorthand may be concise on a fixed English-only mockup, but logical properties make ownership clearer when text direction or writing mode can change. Shorthands also reset longhands they include. If a later rule sets padding-inline-start and an even later padding shorthand runs, the logical start value may be replaced. Trace source order and computed values before increasing specificity. The sample leaves the panel's horizontal margin to the layout container and applies only the external block gap it owns.

.payment-panel { padding: 1rem 1.25rem; margin-block: 0 1.75rem; border: 1px solid #aebfcb; }
.payment-panel__actions { padding-block-start: .75rem; }

Cost and verification

These declarations have negligible runtime cost. The maintenance cost is accidental edge resets when a shorthand is introduced far from a more specific longhand. Group related declarations by component and avoid scattering overrides across files. Test right-to-left labels and a narrow form where extra inline padding can reduce available control width. Padding enlarges the painted box; margin separates it from neighbors. Neither should be used to make an interactive target appear larger if the clickable element itself stays small.

Common Mistakes

• Do not confuse inner padding with outer margin.
• Do not assume a later shorthand preserves earlier edge longhands.
• Do not hard-code left and right when the design means inline start and end.

Connected lessons

• CSS Property Decisions
• CSS logical properties: space content by reading direction
• CSS box-sizing: include padding and borders in a declared size
• CSS alignment and gap: distribute space inside the correct box