Quand utiliser la marge vs padding dans CSS

95

div.box > div { height: 50px; width: 50px; border: 1px solid black; text-align: center; }  div.padding > div { padding-top: 20px; }  div.margin > div { margin-top: 20px; }

<h3>Default</h3>  <div class="box">    <div>A</div>    <div>B</div>    <div>C</div>  </div>    <h3>padding-top: 20px</h3>  <div class="box padding">    <div>A</div>    <div>B</div>    <div>C</div>  </div>    <h3>margin-top: 20px; </h3>  <div class="box margin">    <div>A</div>    <div>B</div>    <div>C</div>  </div>