底部边距还是顶部边距 | CSS-Tricks

我在 Twitter 上发布了一个无上下文投票，只是为了好玩。

好的，让我们开始吧

— Chris Coyier (@chriscoyier) 2016年12月1日

大多数 CSS 专家可能都会猜到，隐含的上下文是

为了垂直间隔元素，您通常会选择在顶部元素上使用 margin-bottom，还是在底部元素上使用 margin-top？

在约 2000 票中，61% 的人选择了 margin-bottom。我猜它会赢，但没想到会这么接近。网络感觉像是一种向下推动的媒介，我认为将间距应用于第一个元素而不是第二个元素感觉更逻辑/自然。

无论哪种方式，通常都需要从一侧或另一侧移除间距。有点像

.module > *:last-child {
  margin-bottom: 0;
}

/* or */

.module > *:first-child {
  margin-top: 0;
}

但不要对此解读太多。处理结构、间距、选择器等等的方法有无数种。我只是想说：它们平分秋色。一个并不比另一个更好。它们也不需要相互排斥，但请记住它们是如何折叠的。

Greg Whitworth 指出，margin-top 实际上在“一个由 Bing 提供支持的包含 1,070,510 页的页面集合”中略占优势。

但正如 Estelle Weyl 指出的那样，这主要来自重置这些值的人，而不是积极地将它们用于间距。看看相同数据中非零值的情况会很有趣。

Gareth

# 2016年12月6日

我无论如何都会避免使用 margin-top 来间隔元素。对我来说，这感觉很糟糕。我总是使用 margin-bottom，除非有充分的理由不这样做。

Bram

# 2016年12月6日

我过去是 margin-bottom 的拥护者，但最近当我们切换到使用 sassline 时，我转到了 margin-top 阵营。最终，使用 margin-top 可以使样式更简洁。不再需要在段落上使用 last-child 来将最后一个段落的边距设置为零。它在标题中也很有用。现在我将标题的边距设置为零。下一个元素上的 margin-top 将设置标题和正文之间的适当间距，但它也允许在它们之间偶尔出现副标题，而无需覆盖大量边距（因为在大多数情况下，我不希望标题和副标题之间有边距）。

我认为，由于网络和层叠样式的向下推动特性，使用 margin-top 比 margin-bottom 更合理。第一个元素从未真正意识到下一个元素。让元素意识到前一个元素要容易得多。

Bruno Babic

# 2016年12月6日

我总是尝试使用 margin-top。对我来说，下面的元素应该与上面的元素保持距离，而不是相反，这感觉更合理。

alberto

# 2016年12月6日

我使用 margin-bottom 很长时间了，但我正在考虑切换到 margin-top。原因是您可以使用 + 选择器来定义两个相邻组件之间的边距。例如

.header + .search-bar {
  margin-top: 0;
}

goose

# 2016年12月6日

我仍然不明白为什么 margin-bottom 比 margin-top 更有吸引力。从上到下工作不是更合乎逻辑吗？谁能提供一个有参考意义的示例？

Nico

# 2016年12月6日

我最初使用双 margin-top 和 margin-bottom 来实现垂直节奏（使用此工具 http://soqr.fr/vertical-rhythm/），但管理起来有点复杂。

现在大多数情况下，我更喜欢在所有内容（包括垂直节奏）上仅使用 margin-bottom 进行间距。

None

# 2016年12月6日

我只是使用当前最适合我需求的方法，这取决于项目，你不能说一个比另一个更合乎逻辑，而且，有时在需要时同时使用两者，我不喜欢被束缚。

Jason

# 2016年12月6日

我倾向于尝试使用 Heydon Pickering 的 Lobotomized Owls 技术，或其一些衍生版本。这最终意味着使用兄弟选择器并在第二个元素上添加 margin-top，这意味着永远不必在序列中的第一个或最后一个子元素上否定顶部或底部的 margin。

Caio

评论永久链接# 2016年12月6日

就是这样！+1
Tyler Sticka

评论永久链接# 2016年12月9日

支持此技术 +1。我已经使用它几年了（！！），并且仍然很喜欢它。

Mark Root-Wiley

# 2016年12月6日

我过去是 margin-bottom 的拥护者，直到我开始使用很棒的 lobotomized owl（* + * { margin-top: 1.5em; }）。我想知道 margin-top 阵营中有多大比例的人也这样。

Adrian

# 2016年12月6日

我认为，对于某些人来说，选择 top 而不是 bottom 的原因可能是因为在 IE8 及更早版本中，您无法使用“:last-child”，只能使用“:first-child”，因此大量示例、库等都使用它们，人们可能出于惯性继续使用它们。

Dan

# 2016年12月6日

我不使用

*:last-child {
  margin-bottom: 0;
}

因为它存在几个问题
– 当使用 flex-direction: column-reverse 时不起作用
– 当使用伪块技术时不起作用

相反，我使用 lobotomized owl 选择器

* + * {
  margin-top: 2em;
}

对我来说，这可以免费获得最多的间距。

grilly

评论永久链接# 2016年12月7日

这不会有同样的问题吗？

faizanali

# 2016年12月6日

现在大多数情况下，我更喜欢在所有内容（包括垂直节奏）上仅使用 margin-bottom 进行间距。

Dustin Horton

# 2016年12月6日

就像 Chris 在文章中描述的那样，我将 margin-bottom 和 last-child 用于大多数情况，除了网格，在网格中我使用 top 和 bottom margin，主要是因为我通常也在 x 轴上对 margin 做同样的事情。

$grid--item-margin-y: 10px;

.grid {
  margin: -$grid--item-margin-y 0;
}

.grid--item {
  margin: $grid--item-margin-y 0;
}

<div class="grid">
  <div class="grid--item"></div>
  <div class="grid--item"></div>
  <div class="grid--item"></div>
  […]
</div>

Michael Berman

# 2016年12月6日

我认为您打错了一个字

您通常会选择在顶部元素上使用 margin-bottom，还是在顶部元素上使用 margin-bottom？

Marc Hoekstra

# 2016年12月7日

为了向后兼容（IE7 和 IE8）而不使用特定于浏览器的 CSS，我更喜欢 margin-top，然后是

.item:first-child {
  margin-top: 0;
}

我想我有点老派……

Martin

# 2016年12月7日

为什么不使用

.item:not(:last-child) {
    margin-bottom: 1em;
}

或

.item:not(:first-child) {
    margin-top: 1em;
}

Marc Hoekstra

评论永久链接# 2016年12月8日

@Martin

为什么不使用 X

移动浏览器和 IE 对 :not 的支持较低/没有。
姓名必填

评论永久链接# 2016年12月8日

@Marc Hoekstra，
仍然坚持支持 IE8-？太恶心了。

Gabe

# 2016年12月9日

我注意到 Bootstrap v4 更喜欢 margin-bottom。

避免使用 margin-top。垂直边距可能会折叠，从而导致意外结果。更重要的是，单方向边距是一个更简单的思维模型。

此偏好在文档中的“方法”部分中指定。我同意，因为我也认为网络是一种“自上而下”的场所。垂直节奏看起来更一致，并且更容易告诉团队中的其他人，“尽量避免使用 margin-top”。这个标准在重新访问项目时特别有用。也就是说，我们的客户不需要 IE8 支持。如果 Microsoft 不支持它，我们就不费心了。

Uncle Jesse

# 2016年12月9日

我将做一个叛逆者，提出将边距间距平均分配给它们的想法。;

Jacob Peattie

# 2016年12月13日

我总是使用 margin-bottom，并拥抱折叠边距。最终会有一堆边距悬挂在一个部分的边缘，但大多数情况下这正是我想要的。

OxyDesign

# 2017年1月5日

我的两分钱，我最近不得不面对这个问题，发现 padding-top（加上用于用 border 制作分隔线的 margin-top）非常适合我。

padding :
– 因为没有像 margin 那样存在折叠风险
– 您还可以设置 border-top 作为分隔线，并在其顶部添加 margin-top

top :
– 因为您可以使用相邻兄弟选择器（+）根据前一个元素调整值

– 使用:first-child移除或减少第一个padding-top（如果需要）。兼容性（CSS 2）IE7+ https://caniuse.cn/#feat=css-sel2，相比之下:last-child（CSS 3）IE9+ https://caniuse.cn/#feat=css-sel3

我最近在一个项目中进行了一些测试来处理这个问题，实验结果在这里： http://codepen.io/OxyDesign/pen/VmEyKq?editors=1100

这个实验是为了测试这个想法的极限。不过，我最终选择了一条稍微不同的路径。现在容器的样式是padding: 0 @spacing @spacing @spacing;，而各个section的样式是padding-top: @spacing;，除了那些需要补偿行高的部分，它们的样式是padding-top: @spacing - @text-spacing; margin-bottom: - @text-spacing，到目前为止，效果非常好。

此评论线程已关闭。如果您有重要信息需要分享，请联系我们。