何时在 CSS 中使用边距与内边距

Question

在编写 CSS 时，是否应该使用特定的规则或指南来决定何时使用 margin 以及何时使用 padding ？

原文由 Alex Angas 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

考虑两个元素一个在另一个之上，每个元素都有 1em 的填充。此填充被认为是元素的一部分并且始终被保留。

所以你最终会得到第一个元素的内容，然后是第一个元素的填充，然后是第二个元素的填充，然后是第二个元素的内容。

因此，这两个元素的内容最终将是 2em 分开。

现在用 1em 边距替换该填充。边距被认为在元素之外，相邻项的边距会重叠。

所以在这个例子中，你最终会得到第一个元素的内容，然后是 1em 的组合边距，然后是第二个元素的内容。所以这两个元素的内容只有 1em 分开。

当您知道要说 1em 元素周围的间距时，这将非常有用，无论它旁边是什么元素。

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

 div.box > div { height: 50px; width: 50px; border: 1px solid black; text-align: center; }
div.padding > div { padding-top: 20px; }
div.margin > div { margin-top: 20px; }

 <h3>Default</h3>
<div class="box">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<h3>padding-top: 20px</h3>
<div class="box padding">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<h3>margin-top: 20px; </h3>
<div class="box margin">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

原文由 pavon 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

边距在块元素的外部，而填充在内部。

• 使用边距将块与其外部的东西分开
• 使用填充将内容从块的边缘移开。

原文由 John Boker 发布，翻译遵循 CC BY-SA 3.0 许可协议