Padding and Margin
Padding is the space inside an element, between its edge and its content. Margin is the space outside it, between it and whatever comes next.
In plain English
Think of a framed photograph. The mount between the picture and the frame is padding: it is inside, and the frame’s background colour shows there. The gap between that frame and the next one on the wall is margin.
That is why adding padding to a coloured box makes the colour area bigger, and adding margin does not.
Why it matters
More layout problems come from confusing these two than from anything else in a page builder. Text touching the edge of a card is missing padding, not margin.
Spacing is also most of what makes a design look considered. Consistent padding across cards and sections reads as professional in a way no font choice can rescue.
How it works
-
Padding pushes content inwardBackgrounds, borders and hover areas grow with it.
-
Margin pushes elements apartThe element’s own size does not change.
-
Both take four valuesTop, right, bottom and left, which builders let you unlink.
-
Vertical margins collapseTwo stacked elements with 30px margins get one 30px gap, not 60. Padding never does this.
Use a scale, not arbitrary numbers
Pick a set like 8, 16, 24, 32, 48, 64 and stay on it. Spacing chosen from a scale looks deliberate; 13px here and 27px there never does.