Question

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

您更喜欢哪种，保证金最高或保证金最低价还是两者兼而有之？为什么呢？

Answer 1

取决于具体情况。但是，通常margin-top更好，因为您可以使用:first-child删除它。像这样：

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

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

这样，边距仅在块之间。

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

Answer 2

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

Answer 3

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

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

这会选择后一个元素，这意味着该规则根本不会应用于第一个元素。元素之上或之下没有其他类，伪类或空格。

Answer 4

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

但是，首选 margin-top与：first-child 的原因（ margin-bottom 与：last-child 相对） CSS: margin top vs bottom中对此进行了详细说明。

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

使用具有：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; }

Answer 5

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

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

在他们的行为而不是他们的内容之后命名类是一种滑坡，并且混淆了HTML的语义特性。例如，如果在页面的一个区域中，所有带有类.top10的元素突然需要20个像素呢？您不必更改单个规则，而是必须创建新的类名，并在想要影响的所有元素上更改它。

要回答原始问题，这完全取决于您希望如何堆叠元素。你想在顶部还是底部留出额外的空间？

Answer 6

是的，我通常也使用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 View Engine）

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

我总是把边距放在我认为更多可选的元素上。也就是说，更容易从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 8

我不太明白为什么你们中的某些人在说边距底边比边距顶边更逻辑。

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

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

<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条规则。它仅在存在多个元素时才起作用，这是您期望的，例如，由于某种原因“第一”和“第二”不存在，并且您不想从顶部开始有多余的空间而导致该空间从顶部开始是通过“框”元素填充处理的。

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

.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;
}

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

考虑到自下而上的优势，我试图找到一些解决方案，但是在您不需要编写多个规则的情况下，我看不到任何解决方案。

.item {
    margin-bottom: 16px;
}

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

不要误会我的意思，在某些情况下需要保证金底部，但我发现很少使用它。

以我的经验，底部始终像脚上的针。

我发现总体上来说，元素之间以及页面之间的关系应尽可能少，并且它们应尽可能地重用。

Ofc使您的生活更简单是您决定做的事。

要维护一条规则，而不是多条规则，是更好的选择吗？

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

Css利润率与利润率最低

8 个答案: