填充是在内容和边框之间计算的。 保证金是在边界外计算的。

边框=元素边框外的空间。

Padding =元素(内部)从文本到边框的空格。

请看这里:http://jsfiddle.net/robx/GaMpq/

我对边距和填充的理解来自于谷歌的开发人员工具，如图所示

简单来说，边距是指元素周围的空间，padding指元素和元素内内容之间的空间。 这两种方法都用来制造间隙，但方式不同。

使用Margin创建间隙:

在创建间隙时，边缘将相邻的元素推开

使用Padding创建间隙:

使用填充来创建间隙既可以增加元素的大小，也可以缩小其中的内容

为什么知道两者的区别很重要?

了解它们的区别是很重要的，这样你就可以知道什么时候使用它们，并适当地使用它们。

同样值得注意的是，在设计网站布局时，页边距和填充很方便，因为页边距指定了一个元素是向上还是向下，向左还是向右移动，而填充指定了一个元素在容器内的外观和位置。

边距应用于元素的外部，从而影响元素与其他元素的距离。

填充应用于元素内部，因此影响元素内容与边框的距离。

此外，使用边距不会影响元素的尺寸，而填充会使元素的尺寸(设置高度+填充)，例如，如果你有一个100x100px的div和5px的填充，你的div实际上将是105x105px

这里的答案中漏掉了一个关键的东西:

上下页边距是可折叠的。

所以如果你在一个元素的底部有一个20px的边距，在下一个元素的顶部有一个30px的边距，两个元素之间的边距将是30px而不是50px。这不适用于左/右边距或填充。

填充

Padding是一个CSS属性，用于定义元素内容与其边框(如果有边框的话)之间的空间。如果元素周围有边框，则填充将从该边框到出现在该边框中的元素内容之间留出空间。如果元素周围没有边框，那么添加填充对该元素没有任何影响，因为没有边框可以提供空格。

保证金

Margin是一个CSS属性，用于定义元素外部到下一个外部元素的间距。

边距影响有或没有边界的元素。如果一个元素有边框，则margin定义了从这个边框到下一个外部元素的空间。如果元素没有边框，则margin定义从元素内容到下一个外部元素之间的空间。

Padding和Margin的区别

所以边距和填充的区别在于填充处理内部空间，而边距处理下一个外部元素的外部空间。