Padding vs Margins

A lot of fellow front-end developers who are just starting out ask me when to use margins and when to use padding.  I start by telling them this: Margin is on the outside of block elements while padding is on the inside.

Use margin to separate the block from things outside it, and padding to move the contents away from the edges of the block.

Here is a diagram of what I’m saying.  Basically, I use padding to move elements such as text and images that are inside a block element such as a div.

Example HTML markup:
<div id=”block-element”>
<p>Content inside of a block element</p>

Example CSS stylesheet:
#block-element { margin: 0 12px 12px 0; }
#block-element p { padding: 10px; }

For more information, please check out this article on w3schools!
Link: Box Model.