What is the difference between padding and margin in CSS?

Question

From what I understand I see a retreat from another element when defined the properties left, top, right e bottom.

There is a difference between margin and padding in the CSS?

An answer with examples (images or code) would help a lot in understanding the question.

Answer 1

Roughly the big difference is:

Margin / Margin - Spacing out of content.

Padding / Padding - Spacing within content limits.

HTML element styles are structured within a box called "The Box Model". Within that same box is the hierarchy:

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

Taking into account that the limit of the spacing of the content of an element is its border (border box). Therefore, the big difference in this case will be 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 content itself, not affecting the spacing of the other elements.

Answer 2

Basically padding is space between the content and the edge, while margin is space overboard, follows an illustration found on google.

According to the w3schools

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

Margin:
CSS margin properties are used to generate space around elements. Margin properties define the size of the white space outside the edge.

Source:W3 padding,W3 margin

Answer 3

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

• margin can have the value auto. padding can’t use auto as a value.
• margin:auto can be useful to center one element within another.
• margin can have negative values, while using negative values in the padding no effect cause.
• padding can receive the background color of the widget. margin does not receive the 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>

Answer 4

To margin is a defined distance between your target object and the other objects around it. Already the padding is a space defined within its 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>

Answer 5

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

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

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

Answer 6

Complementing the answers already offered here with a little code and image, it is possible to put backgroud in elements, so I believe that 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>

Reproduction of that code in html: