我知道填充和边距之间的区别，但什么时候应该使用每个？

Question

This link（以及我检查过的所有其他'保证金与填充'问题），同时提出同样的问题似乎只说明了两者之间的区别。它说，“当你想要外面的空间时，使用边距。当你想要空间内部使用填充”。

这很公平但是如果你看This quick jsFiddle example，我已经使用了各种CSS来获得完全相同的效果。

这个问题是主观的，可能会被关闭但是我浪费了很多时间来决定，“我应该在填充元素上添加填充...或内部元素本身的边距。”

如果你扩展这些div有多个段落，那么如果你想拥有一致的边框/背景，第三个例子很快就会失败。使用<p>标记上的保证金似乎看起来更好，因为它会自动分隔段落。

是否有一个简单的思考过程/一组问题我可以问自己在设计我的网站时得出结论？

Answer 1

我认为来自this question的 Itay Moav 答案提供了一个很好的检查清单，列出了您希望使用保证金的条件，以及您希望使用填充的条件。让我复制粘贴在这里：

1. 您有某种背景属性。利润不会得到它们。
2. 你有一个边框
3. 您使用TD（无边距）
4. 两个嵌套项目，边距折叠在一起，填充不在。 （需要检查一下）
5. 它们可能会以不同方式影响元素的宽度和高度。 （如果有人知道更好，请编辑此内容。）

Answer 2

• 边距（可以）相互折叠，即两个边距为3em的元素各有一个3em的空间
• 填充不会崩溃，即两个带有3em填充的元素在其内容之间有6em空间
• 只要您对带边距/填充的元素应用背景和/或边框，这两者就会导致非常不同的行为

记住这些，适当地申请。没有硬性规定。

Answer 3

边距是问题对象之外的差距，但填充是内部的差距，

即：当你的对象是一个绿色的盒子里面有一些文字，白色的bg时，边缘会在白色区域留下空隙，而填充物会留下绿色。