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

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

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

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

边距在框外，填充在框内

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

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

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

了解边距和填充之间的区别很好。以下是一些区别：

边距是元素的外部空间，而填充是元素的内部空间。边距是元素边界外的空间，而填充是元素边界内的空间。Margin接受auto:bmargin:auto的值，但不能将padding设置为auto。提示：您可以使用此技巧使元素在其父对象内部居中（甚至垂直）。例如，请参见我的另一个答案。边距可以设置为任何数字，但填充必须为非负数。设置元素样式时，填充也会受到影响（例如背景色），但不会影响边距。

边缘

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

例如，我在构建导航条时使用它，使其紧贴屏幕边缘，不会出现空白。

衬料

当我有一个元素在边框内时，我通常使用＜div＞或类似的东西，我想减小它的大小，但同时我想保持它周围其他元素之间的距离或边距。

简单地说，这是情境性的；这取决于你想做什么。

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

使用边距将块与块外的东西分开使用填充将内容移离块的边缘。