What is the difference between padding and margin in CSS?

Basically padding is the space between the content and the border, while margin is the Space outside the border, follows an illustration found in google.

According to the w3schools

Padding:
CSS fill properties are used to generate space around the content. The fill clears an area around the content (inside the edge) of an element.

Margin:
the properties CSS margins are used to generate space around elements. Margin properties define the size of the blank outside the border.

Source: W3 padding,w3 margin

Some interesting differences, in addition to those mentioned in the other answers:

• margin can have the value auto. padding cannot use auto as a value.
• margin:auto can be useful for centering one element within another.
• margin can have negative values, while using negative values in padding has no effect.
• padding can receive the background color of the element. margin does not receive the color of the element.

Examples:

.container {
  display:block;
  width:500px;
  background: #ffcccc
}

.box {
  background-color:#e6e6e6;
  text-align:center;
}

.box0 {
  margin:auto;
  width:100px;
  height:100px;
}

.box1 {
  margin:-10px;
  width:100px;
  height:100px;
}
.box2,.box6 {;
  margin:10px;
  width:100px;
  height:100px;
}
.box3 {
  padding:-10px;
  width:200px;
  height:100px;
}
.box4 {
  padding:10px;
  width:200px;
  height:100px;
}
.box5 {
  padding:10px;
  width:100px;
  height:100px;
}

<h3>Diferenças entre padding e margin</h3>

<p>Margin pode ter valor 'auto', que pode ser útil para centralizar elementos:</p>
<div class="container">
  <div class="box box0">
    margin:auto
  </div>
</div>
<p>Margin pode ter valores negativos.</p>
<div class="container">
  <div class="box box1">
    margin:-10px
  </div><br>
  <div class="box box2">
    margin:10px
  </div>
</div>
<p>Padding não sofre alterações com valores negativos.</p>
<div class="container">
  <div class="box box3">
    padding:-10px
  </div><br>
  <div class="box box4">
    padding:10px
  </div>
</div>
<p>Padding recebe cor do background do elemento, margin não recebe.</p>
<div class="container">
  <div class="box box5">
    padding:10px
  </div><br>
  <div class="box box6">
    margin:10px
  </div>
</div>

A margin is a defined distance between your target object and the other objects around it. padding is a defined space within your object.

#container {
  background: black;
  height: 600px;
  width: 800px;
}

.clear {
  clear: both;
}

.margin {
  border: 3px solid white;
  background: red;
  margin: 10px;
  display: block;
  float: left;
}

.padding {
  border: 3px solid white;
  background: green;
  padding: 10px;
  display: block;
  float: left;
}

<div id="container">
  <div class="margin">MARGIN</div>
  <div class="margin">MARGIN</div>
  <div class="clear"></div>
  <div class="padding">PADDING</div>
  <div class="padding">PADDING</div><br/>
</div>

In addition to the most common difference presented that padding is the space between A and the content and already margin is the space outside the edge, there are two other two important differences.

1) padding is counted as a clickable area and already margin does not;

2) If you have two elements of padding 1px and put one on top of the other, the space between them will be 2px. Already if you swap for margin, the space between them will be 1px. Unless you use the property box-sizing: border-box. Use she, even using margin, the space between them will be 2px

Complementing the answers already offered here with a little code and image, it is possible to put backgroud in elements, so I believe that it will be more visible to The box Model.

<div>
   <label style="background: lightgreen; padding: 50px"> label 1 </label>
</div>
<br><br><br>
<div>
   <label style="background: gold; margin: 50px"> label 2 </label>
</div>
<br><br><br>
<div>
   <label style="background: yellow; margin: 10px; padding: 10px"> label 3 </label>
</div>
<br><br><br>
<div>
   <label style="background: gray; margin: 10px; padding: 10px"> label 4 </label>
   <input type="text" style="background: lightblue; margin: 15px ">
</div>
<br><br><br>
<div>
   <label style="background: gray; margin: 10px; padding: 10px"> label 5 </label>
   <input type="text" style="background: lightblue; padding: 15px ">
</div>
<br><br><br>
<div>
   <label style="background: gray; margin: 10px; padding: 10px"> label 6 </label>
   <input type="text" style="background: lightblue; padding: 15px; margin:15px ">
</div>

Playing this code in html: