何时在CSS中使用margin和padding

Question

编写CSS时，在决定何时使用margin和何时使用时应使用特定的规则或准则padding吗？

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>