当您想为位于第一个元素之后的元素留出空间时，CSS 最佳做法是什么。
假设这个html
<div class="a-block">lorem</div>
<div class="another-block">ipsum</div>
你应该使用这个 css
.a-block { margin-bottom: 10px; }
或
.another-block { margin-top: 10px; }
?
【问题讨论】：
您应该始终一致地应用样式。
例如，如果您有一个英雄并考虑内部元素。例如，您有一个标题、可选的按钮和可选的下方文本。您最终可能会得到不应该存在的边距或填充，并且打算在那里有一个按钮。
此外，当您的设计具有不同的用例时，关于折叠边距的这一点很重要。填充不会折叠，但如果使用不当，可能会导致元素无法“正确”居中。
【讨论】：
由于还没有人提到它，我想补充一点，您可以同时使用这两种方法。这将导致它们通过一个名为margin collapsing 的功能融合在一起。在某些情况下，这也可能是最佳实践，因为您可以使用它来声明“此元素需要至少在其下方有这么多空间”。请注意，如果您不小心使用了禁用它的属性，例如浮动、边框或 flexbox，边距折叠可能会适得其反。
.a-block {
margin-bottom: 10px;
}
.another-block {
margin-top: 10px;
}
div {
background-color: #e0e0e0;
}
.float {
float: left;
clear: both;
width: 100%;
}<div class="a-block">Only 10px margin</div>
<div class="another-block">between these elements</div>
<hr />
<div class="a-block float">Double margin because</div>
<div class="another-block float">of the float</div>【讨论】：
使用 margin-top 将消除使用下一个兄弟选择器的需要。它还无需删除最后一个子元素的下边距，以避免在面板或框中使用文本时出现填充差异。
【讨论】：
这完全取决于需要 CSS 的上下文 - 是简短的回答。这取决于您是否需要下推第一个元素以及所有其他元素。或者您需要第一个元素与父元素的顶部齐平，但您需要底部元素在底部有一个边距。
要考虑的常识是第一个元素已经存在，所以第二个元素肯定需要“下推”，所以很自然的做法是在前一个元素的底部添加边距（至少我的大脑就是这样工作的）。
当前的 CSS 浏览器支持表明这是首选方法。由于在 CSS 中，有一个“下一个兄弟”选择器 (~)，一个“相邻元素”选择器 (+)，并且 :first-child 比 :last-child 得到更广泛的支持（纯粹是因为在浏览器中实现比 :first-child 更难）。即这个 :last-child 支持问题是 IE8，但这仍然影响我们今天为某些客户开发时。
没有以前的兄弟选择器，所以这让我更喜欢在元素底部而不是顶部添加边距和填充的方法。纯粹是为了让我的 CSS 中的所有内容都使用“从上方向下推或选择第一个元素”的相同原则
【讨论】：
在我看来，第二个区块中的margin-top 是一个更好的做法。
确实，第一个 div 不应该关心其他 div，因为它是第一个。
如果第二个被删除，我不应该记得从第一个删除margin-bottom。
【讨论】：
我会使用:nth-child 宽度margin-top
div:not(:first-child) {
margin-top: 10px
}<div class="a-block">lorem</div>
<div class="another-block">ipsum</div>
<div class="another-block-1">ipsum</div>
<div class="another-block-2">ipsum</div>【讨论】：