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/
Top comments (2)
I knew the difference until I read this. Now I’m sure I’ll mess it up.
Can you please help me with what caused confusion? Is it my language or my interpretation of padding and margin? That will help me improve the article