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

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

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

边缘

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

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

衬料

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

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

边距在框外，填充在框内

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

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

保证金与衬垫：

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

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

这里有一些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>