取决于上下文。但是，一般来说margin-top更好，因为你可以使用:first-child来删除它。

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

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

这样，边距仅位于块之间。
显然，只适用于更现代的浏览器。

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

这里投票最多的answer有点过时了，因为它说使用margin-top的好处是你可以使用:first-child（但是从2018年开始，你可以将 margin-bottom 与 ：last-child 结合使用，并获得相同的支持）。
但是，在本文CSS: margin top vs bottom中详细解释了首选margin-top with：first-child（而不是 margin-bottom with ：last-child）的原因。
基本上，它说如果你有一个块在其他相似的块之间，并且你想让这个块的边距（顶部和底部）不同于其他块，你会遇到更多的麻烦，因为没有简单的方法来选择后续元素，但是使用adjacent sibling selector (+)可以在不需要帮助类的情况下实现这一点：

使用margin-top with：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;
}

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

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

这将选择后面的元素，这意味着规则根本不会应用于第一个元素。没有额外的类、伪类或元素上方或下方的空格。
x一个一个一个一个x一个一个二个x

我总是给那些我认为 * 更可选 * 的元素加边距。也就是说，给那些更可能从DOM中删除的元素加边距。例如：

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

在这种情况下，我会将margin-top设置为<p>，因为如果没有标题，description就没有多大意义，但是如果我只想提到标题，description有可能被删除。
另一个例子：

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

在这里，我会做相反的事情，我会给图标添加margin-bottom，我认为图标只是一个装饰，同样，它更有可能被删除。
这是我的哲学.样式元素是通过潜在的DOM变化来防止CSS变化的方法.

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

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

根据类的行为而不是内容来命名类是一种滑坡，会混淆HTML的语义本质。例如，如果在页面的某个区域，所有类为.top10的元素突然需要20个像素来代替，该怎么办？与更改单个规则不同，您必须创建一个新的类名，并在所有您希望影响的元素上更改它。
要回答最初的问题，这完全取决于您希望元素如何堆叠。您希望在顶部还是底部有额外的空间？

我不太明白为什么你们中的一些人会说下边距比上边距更符合逻辑。
只是想让你们知道：页面从上到下呈现。
让我们考虑一个简单的问题

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

正如你所看到的，这里只需要一个规则，它只在多于一个元素的情况下才起作用，这是你所期望的，例如，由于某种原因，“第一”和“第二”不存在，你不想从顶部得到额外的空间，因为顶部的空间是由“框”元素填充处理的。
如果由于某种原因，一个或多个元素的间距与其他元素的间距不同，您只需执行以下操作：

.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”的列表中，但是你为什么要这么做呢？
考虑到保证金底部，我试图找到一些解决方案，但我没有看到任何解决方案，你不需要写多个规则。

.item {
    margin-bottom: 16px;
}

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

不要误解我的意思，在某些情况下，边距底部是需要的，但我发现它很少被使用。
根据我的经验，保证金底部总是像一根针在脚上。
我发现一般来说元素之间和页面之间的关系应该尽可能少&它们应该尽可能的可重用。
Ofc让你的生活更简单是你决定做不做的事情。
有一个规则要维护，而不是多个规则是一件更好的事情，你不同意吗？
更少的CSS代码=更好的性能-〉更快的下载

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

我使用上边距的原因很简单--CSS允许根据前一个元素来控制下一个元素的属性，而不是相反。
因此，我觉得我对页面元素有更多的控制权，因为它们的属性可以很容易地根据出现在它们前面的元素进行调整。
换句话说，我觉得我的元素更“聪明”，因为它们可以适应放置它们的上下文。
另一点是，这种选择主要影响原子元素，如段落、图像、列表。完整的页面通常使用完整的块或组件构建，在许多情况下，这些块或组件根本没有任何边距，并使用内部填充来管理内容和边框之间的间距。