Each element has content < padding < border < margin area.

Tips: you can always inspect and adjust this box model in your browser.

==Be cautious about padding and margin==

Ex:

Say we want to set the margin between 2 <p> to 20px:

<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>

p {
  /* margin between will be 40px */
  padding: 20px;
  margin: 0;
}

p {
  /* Margin collapsing, margin will be 20px */
  padding: 0;
  margin: 20px;
}

So you should always use margin to seperate elements, and use padding to add space between content and border