首先，让我们看看有什么不同，以及每个责任是什么：

1） 保证金CSS边距财产用于在元素周围生成空间。边距财产设置了边境使用CSS，您可以完全控制边距。有用于设置元素每边边距的CSS财产（顶部、右侧、底部和左侧）。

2） 衬垫CSS填充财产用于在内容周围生成空间。填充将清除内容（边框内）周围的区域元素。使用CSS，您可以完全控制填充。那里是CSS财产，用于设置元素每一侧的填充（顶部、右侧、底部和左侧）。

所以简单地说，边距是元素周围的空间，而填充是元素内容周围的空间。

这张来自codemancers的图片显示了边距和边框是如何结合的，以及边框和内容框是如何使其不同的。

此外，他们对每个部分的定义如下：

内容-这定义了文本、图像或其他元素等实际内容所在的框的内容区域。填充-这将清除其包含框中的主要内容。边框-它包围内容和填充。边距-此区域定义一个透明空间，将其与其他元素分隔开。

TL；DR：默认情况下，我在任何地方都使用边距，除非我有边框或背景，并且希望增加可见框内的空间。

对我来说，填充和边距之间的最大区别是垂直边距会自动折叠，而填充不会。

考虑两个元素，一个在另一个之上，每个元素的填充为1米。此填充被视为元素的一部分，并始终保留。

因此，您将以第一个元素的内容结尾，然后是第一个元素填充，然后是第二个元素的填充，最后是第二元素的内容。

因此，这两种元素的含量最终将相距2米。

现在用1毫米的边距替换填充。边距被认为在元素之外，相邻项目的边距将重叠。

因此，在本例中，您将得到第一个元素的内容，然后是1em的组合边距，然后是第二个元素的属性。因此，这两种元素的含量仅相差1米。

当你知道你想说一个元素周围有1em的间距，而不管它旁边是什么元素时，这会非常有用。

另外两个大的区别是，填充包括在点击区域和背景色/图像中，但不包括边距。

div.box>div{height:50px；width:50px，border:1px纯黑；text-align:center；}div.padding>div｛padding-top:20px；｝div.margin>div｛margin-top:20px；｝<h3>默认值</h3><div class=“box”><div>A</div><div>B</div><div>C</div></div><h3>顶部填充：20px</h3><div class=“box padding”><div>A</div><div>B</div><div>C</div></div><h3>页边空白：20px</h3><div class=“box margin”><div>A</div><div>B</div><div>C</div></div>

对你的问题有更多的技术解释，但如果你想要一种方法来思考边距和填充，这个类比可能会有所帮助。

将块元素想象成挂在墙上的相框：

照片就是内容。垫子是衬垫。边框是边框。墙就是视口。两帧之间的间距是边距。

考虑到这一点，一个很好的经验法则是，当您希望将一个元素与墙上的其他元素隔开时，使用边距，当您调整元素本身的外观时，使用填充。边距不会改变元素的大小，但填充会使元素变大1。

1可以使用框大小属性更改此行为。

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

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

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

边缘

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

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

衬料

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

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

保证金与衬垫：

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

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