39

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

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

4

8 回答 8

33

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

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

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

这样，边距仅在块之间。

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

于 2008-11-12T18:30:51.633 回答
19

我总是使用margin-bottom，这意味着在第一个元素之前没有不必要的空间。

于 2008-11-12T18:28:09.750 回答
17

这里投票最多的答案有点过时了，因为它说去的好处margin-top是你可以使用:first-child（但从 2018 年开始，你可以将margin-bottom与:last-child结合使用并获得同等支持）。

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

基本上，它说如果你在其他类似块之间有一个块，并且你希望这个块的边距（顶部和底部）与其他块不同，你会遇到更多麻烦，因为没有简单的方法来选择进行中的元素，但是使用相邻的兄弟选择器（+）可以在不需要帮助类的情况下实现这一点：

在此处输入图像描述

使用带有 :first-child结构的 margin-top，为广告提供适当间距所需的 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;
}
于 2018-10-04T21:45:03.803 回答
14

另一种选择是+结合使用选择器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>

于 2013-02-14T22:25:49.377 回答
2

我总是把边距放在我认为更可选的元素上。也就是说，对于更有可能从 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 更改的方法。

于 2016-06-27T11:38:43.110 回答
1

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

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

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

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

于 2008-11-15T18:41:12.493 回答
1

我不太明白为什么你们中的一些人说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 个问题，如果您将一个元素注入到不包含类“项目”的列表中，但您为什么要这样做？

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

.item {
    margin-bottom: 16px;
}

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

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

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

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

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

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

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

于 2020-09-01T13:37:56.063 回答
0

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

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

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

HTML（剃刀视图引擎）

<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>
于 2011-02-14T19:28:59.630 回答