Question

当您想要为放置在第一个元素之后的元素提供空间时，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; }

Answer 1

我会使用: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>

Answer 2

在我看来，第二个区块中的margin-top是更好的做法。

事实上，第一个div不应该关心其他div，因为它是第一个。

如果第二个被删除，我不应该记得从第一个删除margin-bottom。

Answer 3

使用margin-top将消除使用下一个兄弟选择器的需要。它还消除了从最后一个子节点移除底边距的需要，以避免在面板或框中使用文本时出现填充差异。

Answer 4

完全取决于需要CSS的环境 - 简短的答案。这取决于您是否需要按下第一个元素以及所有其他元素。或者您需要第一个元素与父元素的顶部齐平，但您需要底部元素在底部有一个边距。

需要考虑的常识是第一个元素已经存在，所以第二个元素肯定需要被推送到＃34;因此，自然要做的就是在前一个元素上添加边距（至少这是我大脑工作的方式）。

当前的CSS浏览器支持表明这是首选方法。由于在CSS中，有一个＆＃34;下一个兄弟＆＃34;选择器（〜），＆＃34;相邻元素＆＃34;选择器（+），和：first-child比以下更广泛支持：last-child是（纯粹因为它在浏览器中实现起来比：first-child更难）。即：最后一个孩子的支持问题是IE8，但在为某些客户开发时，这仍然影响着我们。

之前没有兄弟选择器，所以这使我更喜欢将边距和填充添加到元素底部而不是顶部的方法。纯粹只是为了让我的CSS中的所有内容都使用相同的主体，从上面推下来或选择第一个元素＆＃34;

Answer 5

由于还没有人提及它，我想补充说你可以同时使用它们。这将使他们通过名为margin collapsing的功能融合在一起。在某些情况下，这也可能是最佳实践，因为您可以使用它来声明＆＃34;此元素至少需要它下面的这个空间＆＃34;。请注意，如果您不小心使用禁用它的属性（例如浮动，边框或弹性框），边距折叠可能会适得其反。

＆＃13;

.a-block {
  margin-bottom: 10px;
}

.another-block {
  margin-top: 10px;
}

div {
  background-color: #e0e0e0;
}

.float {
  float: left;
  clear: both;
  width: 100%;
}

＆＃13;

<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>

＆＃13;

Answer 6

您应始终对应用样式的方式保持一致。

例如，如果你有一个英雄并考虑内部元素。例如，您有一个标题，可选择一个按钮，以及可选的文本。您最终可能会出现不应该存在的边距或填充，并且打算在那里设置按钮。

此外，当您使用具有不同用例的设计时，关于折叠边距的要点非常重要。填充物不会坍塌，但如果使用不当，可能导致元素无法正确居中......

当两者都有效时，保证金最高点和保证金最低点之间的CSS最佳做法？

6 个答案: