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

填充应用于元素的内部，从而影响元素的内容距离边框的距离。

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

记住这三点:

边距是控件周围的额外空间。 填充是控件内部的额外空间。 外部控件的Padding是内部控件的Margin。

演示图片:(红框为欲望控制)

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

上下页边距是可折叠的。

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

Padding是内容和边框之间的空间，而margin是边框之外的空间。这是我从谷歌快速搜索中找到的一张图片，它说明了这个想法。

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

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

使用Margin创建间隙:

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

使用Padding创建间隙:

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

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

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

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

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