任何一个在设计界冒险的人都一定听说过“边距”和“填充物”这两个词经常被抛出。尽管许多学习者理解边距和填充都是指元素之间的空间，但他们无法区分边距和填充。任何了解这两个术语之间区别的人都可以做出更好的设计决策。

• 什么是填充？

填充是指元素和边框之间的空间。重要的是要强调，填充围绕着内容的所有四个方面。

• 什么是利润？

边距是指元素和外部元素之间的空间。它是一个元素和另一个元素之间的边界。

填充和边距之间的差异

1. 填充和边距的相互作用

边距和填充之间的主要区别之一是它们之间的相互作用。填充与设计或对象的内部组成部分相互作用，因为它是所考虑对象的边界和内容之间的空间。另一方面，边缘与被注意对象的外部环境相互作用，因为它是对象和下一个对象之间的空间，距离对象最近。

1. 填充和边距的目的

边距和填充都是根据它们的用途或它们在对象中所扮演的角色来区分的。边缘的主要目的是确保物体四周不暴露于物体周围的其他物体。它为整个对象提供安全性，使对象不受外部环境的干扰或影响。另一方面，填充的作用是确保对象的内容不与边界交互。填充确保内容物不会接触到覆盖它们的物体的边缘，因此起到减震器的作用。

1. 在不同浏览器下表现不同

margin和padding之间的一个主要区别是它们在不同浏览器下的行为不同。人们会发现，某个浏览器处理对象的外部空间和内部空间，而另一个浏览器拒绝处理边距或填充。有时，可能会发现浏览器拒绝处理对象的任何空格—可能是边距或填充。这就解释了为什么某些页边距在某些浏览器上挂载时会自动折叠。

1. 对填充和边距大小的影响

区分边距和填充的另一个因素是它们在行为方式上有一些显著的不同，或者它们影响对象的高度和宽度。边距通过确保对象的宽度和高度都增加几英寸来增加对象的大小。这是因为边距位于对象外部，它试图影响对象外部的空间。另一方面，填充对对象的大小没有影响，因为它不影响对象的宽度和高度。实际上，填充在对象内部，这意味着它不能影响包含它的对象的大小。

1. 何时使用填充和边距

最后，何时使用边距与何时使用填充不同。这意味着，尽管这两个空间在各自的用途上存在显著差异，但在每个空间的实际使用方面，也可以表现出一些显著差异。填充主要用于希望背景色在创建的空间中继续时。这意味着当人们希望自己的背景被窥视时，他们会使用填充。另一方面，当人们希望自己的背景色侵入个人空间时，他们会使用边距。

Table Illustrating Differences Between Margin and Padding

总结 - 填充物(of padding) vs. 边缘(margin)

• 因此，如您所见，边距和填充之间有着本质的区别，在选择使用哪一个在页面上移动粒子时，您应该加以考虑。
• 然而，在这些情况下，无论是边界或填充可以用来达到同样的效果，很多判断归结为个人喜好。