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

问题描述

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

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

考虑两个元素，一个在另一个之上，每个元素都有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>

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

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

解决方法

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