Padding is space inside an element's border, between the border and the content, while margin is space outside the border that pushes neighboring elements away.
Where each one sits explains how they behave:
The background color fills the padding. The margin is always transparent.
Padding adds to the rendered size under the default content-box. With box-sizing: border-box, padding sits inside the declared width instead. Margin never counts toward the width.
Vertical margins between blocks can collapse into one gap. Padding never collapses.
Margin can be negative or auto, and margin: 0 auto centers a block that has a width. Padding cannot be negative.
Use padding to give the content room inside its box, and margin to space boxes apart.
Rewriting in plainer words…
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
