保证金在盒子外面，填充物在盒子里面

余量

边距通常用于在元素本身及其周围之间创建空间。

例如，我在构建导航栏时使用它，以使其贴在屏幕的边缘并且没有白色间隙。

填充

我通常在边框中有一个元素<div>或类似元素时使用它，并且我想减小其大小，但是当时我想保持周围其他元素之间的距离或边距。

简而言之，这是情况。这取决于您要做什么。

I always use this principle:

This is the box model from the inspect element feature in Firefox. It works like an onion:

• Your content is in the middle.
• Padding is space between your content and edge of the tag it is inside.
• The border and its specifications
• The margin is the space around the tag.

因此，更大的边距将在包含您的内容的盒子周围留出更多空间。

较大的填充将增加您的内容与其所在的框之间的空间。

如果将其设置为特定值，则它们都不会增大或减小框的大小。

这是一些HTML，演示了如何padding以及如何margin影响可点击性和背景填充。一个对象获得对其填充的点击，但是在对象边缘区域的点击进入其父对象。

$(".outer").click(function(e) {
  console.log("outer");
  e.stopPropagation();
});

$(".inner").click(function(e) {
  console.log("inner");
  e.stopPropagation();
});

.outer {
  padding: 10px;
  background: red;
}

.inner {
  margin: 10px;
  padding: 10px;
  background: blue;
  border: solid white 1px;
}

<script src="http://code.jquery.com/jquery-latest.js"></script>

<div class="outer">
  <div class="inner" style="position:relative; height:0px; width:0px">

  </div>
</div>

边距清除元素周围（边框之外）的区域，但填充清除元素周围（边框内）的内容。

这意味着您的元素不知道其外部页边距，因此，如果要开发动态Web控件，建议您尽可能使用padding vs margin。

请注意，有些时候您必须使用保证金。

这是很好的了解之间的差异margin和padding。以下是一些区别：

• 边距是元素的外部空间，而填充是元素的内部空间。

• 边距是元素边框外部的空间，而填充是元素边框内部的空间。

• 保证金接受auto：的值margin: auto，但是您不能将padding设置为auto。

• 边距可以设置为任何数字，但填充必须为非负数。

• 在设置元素样式时，填充也会受到影响（例如背景色），但空白不会受到影响。

要注意的一件事是，当自动折叠边距使您烦恼（并且您没有在元素上使用背景色）时，使用填充就更容易了。

高级保证金与填充说明

用padding空格分隔元素中的内容是不合适的。你必须利用margin上子元素来代替。较早的浏览器（例如Internet Explorer）会误解盒式模型，除非要使用margin它，否则它在Internet Explorer 4中可以完美运行。

有当使用两个例外padding 是适当的使用：

1. 它应用于不能包含任何子元素（例如输入元素）的内联元素。

2. 您正在补偿浏览器的一个高度杂项错误，供应商*咳嗽* Mozilla *咳嗽*拒绝修复该错误，并确定（在与W3C和WHATWG编辑器进行定期交流的程度上）您必须拥有一个可行的解决方案，并且该解决方案不会影响您要补偿的错误以外的其他任何内容的样式。

当您拥有100％宽度的元素时，padding: 50px;您可以有效获得width: calc(100% + 100px);。由于margin是不加入width也不会造成意想不到的布局问题，当您使用margin上child elements，而不是padding直接的元素。

因此，如果您不执行上述两项操作之一，请不要在元素中添加填充，而是直接在子元素/子元素中添加填充，以确保在所有浏览器中都能获得预期的行为。

保证金与填充：

1. 页边距用于在元素中创建该元素与页面的其他元素之间的距离。使用填充来创建内容与元素边框之间的距离的地方。

2. 边距不是元素的一部分，而填充是元素的一部分。

请参考下面摘自Margin Vs Padding-CSS Properties的图像

我见过的最好的例子，图表甚至“尝试一下”视图都在这里解释。

我认为下面的图表可以直观地了解两者之间的区别。

要记住的一件事是，符合标准的浏览器（IE怪癖是一个例外）仅将内容部分呈现为给定的宽度，因此在布局计算中应注意这一点。另请注意，Bootstrap 3支持边框，边框在某种程度上卷土重来。

边距位于块元素的外部，而填充位于内部。

• 使用边距将图块与它外面的东西分开
• 使用填充将内容从块的边缘移开。

有关问题的更多技术说明，但是如果您正在寻找一种思考边距和填充的方法，可以帮助您选择何时以及如何使用它们，则可能会有所帮助。

将块元素与挂在墙上的图片进行比较：

• 该浏览器窗口就像是在墙上。
• 的内容是一样的照片。
• 页边距就像被框住的图片之间的墙面空间一样。
• 该填充就像围绕着照片抠图。
• 该边界就像一个框上的边框。

当保证金和填充之间的决定，这是经验的一个很好的规则来使用保证金，当你在关系到其他事情上墙，间距元素填充时，要调整的元素本身的外观。边距不会更改元素的大小，但填充通常会使元素变大¹。

¹ 可以使用box-sizing属性更改此默认框模型。

来自https://www.w3schools.com/css/css_boxmodel.asp

不同部分的说明：

• 内容 -框的内容，其中显示文本和图像

• 填充 -清除内容周围的区域。填充是透明的

• 边框 -围绕边框和内容的边框

• 边距 -清除边界外的区域。边距是透明的

实时示例（通过更改值进行操作）：https : //www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel