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

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

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

边距和填充之间的一个关键区别在任何答案中都没有提到:点击性和悬停检测

增加填充会增加元素的有效大小。有时我有一个很小的图标，我不想让它看起来更大，但用户仍然需要与该图标进行交互。我增加了图标的填充，让点击和悬停的足迹更大。增加图标的边距不会有同样的效果。

关于这个主题的另一个问题的回答给出了一个例子。

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

记住这三点:

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

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

Padding是边框内的空间，而Margin是边框外的空间。

边距是框外的空间;填充物是盒子内部的空间。用白色填充很难看出区别，但用彩色填充可以很好地看到。