What is the difference between padding and margin in CSS?

Roughly the big difference is:

Margin - Spacing out of content.

Padding - Spacing within content boundaries.

The styles of HTML elements are structured inside a box called "The Box Model" . Within this same box exists the hierarchy:

Margin Box
Border Box
Padding Box
Element Box ( O elemento em si, div, span, entre outros )

Considering that the border of the content space of an element is its border (border box). Therefore, the big difference in this case is that the margin is already applied outside the element and will create spacing between the remaining elements, but the padding will create spacing within the element's own content, not affecting the spacing of the other elements.

Basically padding is the space between content and border , while margin is the out-of-the-border space , an illustration found in google < br>

Accordingtow3schools

Padding:
CSSfillpropertiesareusedtogeneratespacearoundthecontent.Thefillcleansanareaaroundthecontent(withintheborder)ofanelement.

Margin:
CSSmarginpropertiesareusedtogeneratespacearoundelements.Marginpropertiessetthesizeofthewhitespaceoutoftheborder.

Source: w3 padding , w3 margin

Some interesting differences, other than those mentioned in the other answers:

• margin can have the value auto . padding can not use auto as value.
• margin:auto can be useful for centralizing 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 get element color.

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>

The 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 shown that padding is the space between a and content and since margin is outer space, there are two other two important differences.

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

2) If you have two elements of padding 1px and place one on top of the other, the space between them will be 2px. If you change by margin , the space between them will be 1px. Unless you use the box-sizing: border-box property. Using it, even using margin, the space between them will be 2px

Complementing the answers already provided here with a bit of code and image, it is possible to put backgroud into elements, so I believe it will become 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>

Reproduction of this code in html :