Detailed explanation
Margin and padding both control spacing in CSS, but they occupy different parts of the box model. From the inside out, an element has content, padding, a border, and margin. Padding creates space between the content and the border, making text or images feel less cramped. Margin creates space outside the border, separating the element from surrounding elements. This distinction matters because two layouts can look similar while behaving differently when backgrounds, borders, or interactions are added.
For example, `.card { padding: 16px; margin: 24px 0; }` gives the card 16 pixels of internal spacing on all four sides and margins of 24 pixels at the top and bottom, with zero horizontal margins. By default, an element’s background paints through its padding and underneath its border, but not into its margin. For a button or link, padding generally increases the clickable area; margin does not. Both properties support individual sides and shorthand notation. Negative margins are allowed and can bring boxes closer together or cause overlap, whereas negative padding is invalid.
Margin and padding also affect sizing differently. With the default `box-sizing: content-box`, a declared width applies to the content only, so horizontal padding and borders increase the border-box width. A card with `width: 200px`, 16-pixel padding, and 1-pixel borders has a border-box width of 234 pixels. With `box-sizing: border-box`, those padding and border values are included within the declared 200 pixels. Margins remain outside the border box in either case and still affect spacing in the layout.
An important interview detail is margin collapsing. In normal block layout, adjoining vertical margins can collapse: two positive margins of 24 pixels and 16 pixels typically produce a 24-pixel gap, not 40 pixels. Collapsing can also involve parent and child margins under specific conditions. Horizontal margins do not collapse, and margins between flex or grid items do not collapse. Padding never collapses. Interviewers usually expect you to explain the inside-versus-outside distinction first, then demonstrate its practical effects on backgrounds, sizing, and vertical spacing.
Key points to remember
- Padding is inside the border; margin is outside it.
- Backgrounds cover padding by default, but never the margin area.
- Padding contributes to border-box dimensions; margin remains outside them.
- Adjoining vertical margins can collapse in normal block layout; padding never collapses.
- Margins can be negative or use `auto`; padding supports neither.
Common mistakes candidates make
- Using margin to create internal spacing and expecting the element’s background or clickable area to expand.
- Assuming adjacent vertical margins always add together or always collapse, regardless of layout.
- Forgetting that padding increases the rendered width under `content-box`, potentially causing overflow.
Likely follow-up questions
Can margin be used to centre an element horizontally?
Yes: a normal block element with a width smaller than its container can use `margin-inline: auto` to distribute the remaining horizontal space equally. This does not generally centre it vertically in normal block layout.
How can you prevent parent-child margin collapsing?
Setting `display: flow-root` on the parent establishes a new block formatting context and prevents its margins from collapsing with its children’s margins. Appropriate border or padding on the relevant edge can also separate those margins, but changes the box’s appearance or spacing.
When should you use gap instead of margins?
In flex and grid layouts, `gap` is often clearer for consistent spacing between items. It adds spacing between items without adding a corresponding outer margin around the container’s edges.
Interview tip: Start with the box-model order, explain the card example, and then mention margin collapsing as the main behavioural difference.