CSS中“margin”和“padding”属性的区别[重复]

Question

这个问题在这里已有答案：

• When to use margin vs padding in CSS [closed] 16个答案

根据下面的示例，“margin”和“padding”属性将用于在段落元素周围创建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

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

.margin,
.padding {
  background: red;
}

.padding {
  padding: 10px;
}

.margin {
  margin: 10px;
}

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