管理边距，使最后一个元素没有边距

Posted 2023-03-06

【中文标题】管理边距，使最后一个元素没有边距

【英文标题】：Manage margins so that the last element(s) have no margin(s)

【发布时间】：2016-07-19 05:14:21

【问题描述】：

我使用盒子，我想总是给最后一个元素一个“margin-bottom：0”。所以首先我给每个元素一个“margin-bottom: 1em;”。我现在想从我的框中的最后一个元素中删除这个边距底部，但是如果其中有一个元素不起作用，我仍然在底部有一个边距。知道怎么做吗？它可以是一个段落或一个 DIV 或 SPAN 或其他任何东西，所以我并不总是想手动执行此操作。我想用这个做一个mixin。

我试过了：

section *+:last-child 
   margin-bottom: 0;
   border: 3px solid blue;

但在最后一个 div 中有一个带有边距的段落，所以它不起作用。

【问题讨论】：

我想你需要一门课。除非每个部分都以 <p> 标记或相同的标记结尾，否则使用 last-child 或 last-of-type 没有足够的特异性。你真的应该尽可能地避免 * 。这是一个巨大的性能冲击。

嗯，是的，我想得越多，我就越需要上课:-(。

【参考方案1】：

保持简单。把它放在你的样式表的顶部，然后忘记。在过去，它为我省去了很多麻烦：

*:last-child 
  margin-bottom: 0;

【讨论】：

不要这样做。使用更具体的东西。并非所有元素都垂直流动。

【参考方案2】：

  section div:last-of-type p 
  margin-bottom: 0;
  border: 3px solid blue;
 

似乎对它进行排序.... 但是，这假定最后一个元素是 div 内的段落。如果你有不同的最后一个元素，一个类将是一个更有效的解决方案。

【参考方案3】：

您想使用:not()。也就是说，

section:not(:last-child) margin-bottom:1em;

我的语法可能不适合你正在做的事情，但这是一个开始。

【讨论】：

我认为 ":not" 并没有真正的帮助，因为我不知道最后一个是什么类型的元素，它可能是 DIV 或 P 或 SPAN。但也许这可能会导致解决方案......嗯。

@HenningFischer 然后你可以让它成为父元素的最后一个子元素，这并不重要。只是 :not(:last-child)。再说一次，我现在只是在做准备而不是测试。

@HenningFischer 只需添加一个空格。 section :not(:last-child)

@abluejelly 我认为他最后的评论可能是正确的。

当我用我的笔做这件事时，它看起来更像是一团糟......。

【参考方案4】：

我会亲自为这些使用类名，并专门针对我要修改的类。但是，如果你想避免类名，你可以使用 last-child

Syntax:
:last-child

Usage:
p:last-child 
  font-size: 0.75em;

更多信息here