Many times I used to get confused between padding and margin. This is how I now think about these two to have a clear distinction between them.
Padding
Padding is something I add to protect the content. Like foam packaging around a delicate item.
It comes inside border.
If we have a background color padding area gets background color too.
Margin
Margin is something I add to provide a distance between one box to other
Like moat around a castle.
It keeps two boxes from touching each other.
If we add background to the margin doesn't get it
Here is the link to jsfiddle
https://jsfiddle.net/sampath5698/574fy36L/6/
