html - 我知道填充和边距之间的区别，但是你应该什么时候使用它们呢？

Question

这个链接（以及我检查过的所有其他“边距与填充”问题），同时提出相同的问题似乎只说明了两者之间的区别。它说，“当你想要外部空间时，使用边距。当你想要内部空间时，使用填充”。

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

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

如果您将这些 div 扩展为具有多个段落，那么如果您想要具有一致的边框/背景，第三个示例很快就会失败。在标签上使用 Margin 的那个<p>看起来更好看，因为它会自动分隔段落。

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

Answer 1

我认为Itay Moav对这个问题的回答提供了一个很好的清单，说明您希望使用边距的条件以及您希望使用填充的条件。让我在这里复制粘贴：

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

Answer 2

• 边距（可以）相互折叠，即两个边距为 3em 的元素，每个元素之间有 3em 的空间
• 填充不会折叠，即两个具有 3em 填充的元素在其内容之间有 6em 空间
• 一旦您将背景和/或边框应用于具有边距/填充的元素，两者将导致非常不同的行为

牢记这些，酌情申请。没有硬性规定。

Answer 3

边距是相关对象外部的间隙，但填充是内部的间隙，

即：当您的对象是一个带有一些文本的绿色框时，带有白色背景，边距在白色区域留下间隙，而填充在绿色区域中留下。