CSS margin-top vs margin-bottom

Question

如果您有一系列块元素，并且您想在它们之间放置边距。

您更喜欢哪一个，margin-top 或 margin-bottom 或两者兼而有之？为什么？

Answer 1

我总是使用margin-bottom，这意味着第一个元素之前没有多余的空格。

Answer 2

取决于上下文。但是，通常margin-top 更好，因为您可以使用:first-child 将其删除。像这样：

div.block {
    margin-top: 10px;
}

div.block:first-child {
    margin-top: 0;
}

这样，边距只在块之间。

显然，仅适用于更现代的浏览器。

Answer 3

@This Mat - 我不同意你的做法。我会以语义方式为元素分配间距，并使用上下文选择器来定义该元素集合的行为。

.content p { /* obviously choose a more elegant name */
   margin-bottom: 10px;
}

根据类的行为而不是内容来命名类有点滑坡，并且会混淆 HTML 的语义性质。例如，如果在页面的某个区域，所有具有类 .top10 的元素突然需要 20 个像素，该怎么办？您不必更改单个规则，而是必须创建一个新的类名，并在您想要影响的所有元素上更改它。

要回答最初的问题，这完全取决于您希望元素如何堆叠。您想要顶部或底部的额外空间吗？

Answer 4

是的，我通常也使用 margin-bottom ，然后将最后一个类分配给最后一个类。假设你想要一个不同的样式。

.discussion .detailed.topics { margin: 20px 0 }    
.discussion .detailed.topics .topic { margin-bottom: 30px }
.discussion .detailed.topics .topic.last { margin-bottom: 0 }

当您使用动态驱动的内容时，这是一种强大的方法

HTML（Razor 视图引擎）

<div class="detailed topics">   
   @if (Model.ActiveTopics != null && Model.ActiveTopics.Count > 0)
   {
      for (int i = 0; i < Model.ActiveTopics.Count(); i++)
      {
          var topic = Model.ActiveTopics[i];
          <div class="topic@(i == Model.ActiveTopics.Count - 1 ? " last" : "")">
                ...                                 
          </div>
      }
   }
</div>

Answer 5

另一种选择是将+ 选择器与margin-top 结合使用：

.article + .article {
    margin-top: 10px;
}

这将选择后一个元素，这意味着该规则根本不适用于第一个元素。元素上方或下方没有额外的类、伪类或空间。

/* CSS rules for legibility. */
section, article {
  outline: 1px solid blue;
}

section {
  background: lightgreen;
  padding: 10px;
}

section + section {
  margin-top: 30px;
}

article {
  background: lightblue;
}

/* Using the + selector. */
#PlusSelectorExample article + article {
  margin-top: 30px;
}

/* Using margin-bottom only. */
#MarginBottomExample article {
  margin-bottom: 30px;
}

/* Using last-child. */
#LastChildExample article {
  /* Other CSS rules for this element. */
  margin-bottom: 30px;
}

#LastChildExample article:last-child {
  margin-bottom: 0;
}

<p>The plus selector only selects an element following another. Combining the plus selector and margin-top means there's no extra space at the top since the selector doesn't apply.</p>
<section id ="PlusSelectorExample">
  <article>In vel sem sed nulla scelerisque semper. Fusce dictum semper lectus, a cursus turpis fermentum vitae.</article>
  <article>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</article>
  <article>Suspendisse potenti. Duis id lacus augue. Duis ultricies est viverra, dapibus est quis, pretium sapien.</article>
</section>
<p>Using margin-bottom leaves an extra gap at the bottom.</p>
<section id="MarginBottomExample">
  <article>In vel sem sed nulla scelerisque semper. Fusce dictum semper lectus, a cursus turpis fermentum vitae.</article>
  <article>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</article>
  <article>Suspendisse potenti. Duis id lacus augue. Duis ultricies est viverra, dapibus est quis, pretium sapien.</article>
</section>
<p>Combining margin-bottom with last-child achieves the same as the plus operator.</p>
<section id="LastChildExample">
  <article>In vel sem sed nulla scelerisque semper. Fusce dictum semper lectus, a cursus turpis fermentum vitae.</article>
  <article>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</article>
  <article>Suspendisse potenti. Duis id lacus augue. Duis ultricies est viverra, dapibus est quis, pretium sapien.</article>
</section>

Answer 6

我总是为我认为更多可选的元素设置边距。也就是说，对于更有可能从 DOM 中删除的元素。示例：

<div class="title">My Awesome Book</div>
<p>Description of My Awesome Book</p>

在这种情况下，我会将margin-top 改为<p>，因为如果没有标题，描述将没有多大意义，但如果我只想提及标题，描述可能会被删除。

另一个例子：

<img src="icon.png">
<div>My Awesome Book</div>

在这里，我会做相反的事情。我会将margin-bottom 添加到图标中。我认为图标只是一种装饰，而且它更有可能被移除。

这是我的哲学。样式元素是通过潜在的 DOM 更改来防止 CSS 更改的方法。

Answer 7

这里投票最多的answer 有点过时了，因为它说使用margin-top 的好处是你可以使用:first-child（但截至2018年，你可以使用margin-bottom 与 :last-child 结合使用同等支持）。

然而，更喜欢 ma​​rgin-top 和 :first-child 的原因（代替 margin-bottom 和 :last-child）在CSS: margin top vs bottom这篇文章中有详细解释。

基本上，它表示如果您在其他相似块之间有一个块，并且您希望该块的边距（顶部和底部）与其他块不同，您会遇到更多麻烦，因为没有简单的方法来选择继续元素，但是使用 adjacent sibling selector (+) 可以在不需要帮助类的情况下实现这一点：

使用 ma​​rgin-top 和 :first-child 结构，为广告提供适当间距所需的 CSS 是：

article {
    margin-top: 2em;
}

article:first-child {
    margin-top: 0;
}

//space at the top of the Ad
.ad {
    margin-top: 1em;
}

//and to reduce space below the ad
.ad + article {
    margin-top: 1em;
}

Answer 8

我不太明白为什么你们中的一些人说 margin-bottom 比 margin-top 更符合逻辑。

只是为了确保大家都知道：页面是从上到下呈现的。

让我们考虑一个简单的问题

<div class="box">
   <div class="item first"></div>
   <div class="item second"></div>
   <div class="item third"></div>
</div>

框内的元素之间应该有它们的距离。

一个非常通用的解决方案

.item:nth-child(n+2) {
    margin-top: 16px;
}

或者你可以使用

.item + .item {
    margin-top: 16px;
}

如您所见，只需要 1 条规则。 它仅在存在超过 1 个元素时才起作用，如果例如由于某种原因“第一”和“第二”不存在，您不希望从顶部获得额外的空间导致空间从顶部开始由“box”元素填充处理。

如果由于某种原因一个或多个元素的间距应该与其他元素不同，您只需这样做：

.item + .item {
    margin-top: 16px;
}

.item + .item.second {
    margin-top: 32px;
   // you could use margin-bottom here but there will be needed a different rule for handling if there is no 3rd element
}

.item.second + .item {
    margin-top: 32px;
}

我在这里发现了 1 个问题，如果您将一个元素注入到不包含“item”类的列表中，但是为什么要这样做呢？

考虑到 margin-bottom 我试图找到一些解决方案，但我没有看到任何不需要编写多个规则的解决方案。

.item {
    margin-bottom: 16px;
}

.item:last-child {
   margin-bottom: 0px;
}

不要误会，在某些情况下需要底部边距，但我发现很少使用它。

根据我的经验，margin-bottom 总是像脚上的针。

我发现一般来说，元素之间和页面之间的关系应该尽可能少，并且它们应该尽可能地可重用。

Ofc 让您的生活更简单是您决定做或不做的事情。

维护一条规则而不是多条规则更好，您不同意吗？

更少的 css 代码 = 更好的性能 -> 更快的下载