保证金与衬垫：

元素中使用边距来创建该元素和页面其他元素之间的距离。其中填充用于在元素的内容和边框之间创建距离。边距不是元素的一部分，而填充是元素的一。

请参阅下面从边距与填充-CSS财产中提取的图像

TL；DR：默认情况下，我在任何地方都使用边距，除非我有边框或背景，并且希望增加可见框内的空间。

对我来说，填充和边距之间的最大区别是垂直边距会自动折叠，而填充不会。

考虑两个元素，一个在另一个之上，每个元素的填充为1米。此填充被视为元素的一部分，并始终保留。

因此，您将以第一个元素的内容结尾，然后是第一个元素填充，然后是第二个元素的填充，最后是第二元素的内容。

因此，这两种元素的含量最终将相距2米。

现在用1毫米的边距替换填充。边距被认为在元素之外，相邻项目的边距将重叠。

因此，在本例中，您将得到第一个元素的内容，然后是1em的组合边距，然后是第二个元素的属性。因此，这两种元素的含量仅相差1米。

当你知道你想说一个元素周围有1em的间距，而不管它旁边是什么元素时，这会非常有用。

另外两个大的区别是，填充包括在点击区域和背景色/图像中，但不包括边距。

div.box>div{height:50px；width:50px，border:1px纯黑；text-align:center；}div.padding>div｛padding-top:20px；｝div.margin>div｛margin-top:20px；｝<h3>默认值</h3><div class=“box”><div>A</div><div>B</div><div>C</div></div><h3>顶部填充：20px</h3><div class=“box padding”><div>A</div><div>B</div><div>C</div></div><h3>页边空白：20px</h3><div class=“box margin”><div>A</div><div>B</div><div>C</div></div>

关于边距的问题是，您不必担心元素的宽度。

就像当你给出一些{padding:10px；}时，你必须将元素的宽度减少20px，以保持“适合”，而不干扰周围的其他元素。

因此，我通常从使用填充来“填充”所有内容开始，然后使用边距进行微调。

另一点需要注意的是，不同浏览器上的填充更为一致，IE对负边距的处理也不太好。

这里有一些HTML演示了填充和边距如何影响可点击性和背景填充。一个对象会收到对其填充的点击，但对对象空白区域的点击会转到其父对象。

$（“.other”）.click（函数（e）{console.log（“外部”）；e.停止传播（）；});$（“.intern”）.click（函数（e）{console.log（“内部”）；e.停止传播（）；});.外部{填充：10px；背景：红色；}.内部{边距：10px；填充：10px；背景：蓝色；边框：纯白1px；}<script src=“http://code.jquery.com/jquery-latest.js“></script><div class=“outer”><div class=“inner”style=“位置：相对；高度：0px；宽度：0px”></div></div>

我所见过的最好的例子、图表，甚至是“自己试试看”的观点都在这里。

我认为下面的图表可以立即直观地理解两者的区别。

需要记住的一点是，符合标准的浏览器（IE怪癖是一个例外）只将内容部分渲染为给定的宽度，因此在布局计算中要注意这一点。还要注意的是，随着Bootstrap 3的支持，border box有点卷土重来。

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

这意味着您的元素不知道其外部边距，因此如果您正在开发动态web控件，我建议您尽可能使用填充与边距。

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