CSS中“margin”和“padding”属性的区别

Question

根据下面的示例，“margin”和“padding”属性将用于在paragraph元素周围创建100px的空间（在边框内创建空间）。那么CSS中的“margin”和“padding”属性有什么区别？

<style type="text/css">
    div.bor {
       border:5px solid red;
    }
    div.mar {
       margin:100px;
    }
</style>
<div class="bor">
   <div class="mar"><p>This is a paragraph</p></div>
</div><br>
<div class="bor">
   <div style="padding:100px">
   <p>This is a paragraph</p>
</div>
</div>

Answer 1

保证金在外面，填充物在容器内。

＆＃13;

＆＃13;

.margin,
.padding {
  background: red;
}

.padding {
  padding: 10px;
}

.margin {
  margin: 10px;
}

＆＃13;

<p class="margin">
  Margin
</p>
<p class="padding">
  Padding
</p>

＆＃13;

＆＃13;

＆＃13;