指定元素间距的最佳 CSS 方法（可能使用 flexbox 等）答案

【问题标题】：Best CSS method to specify inter-element spacing (possibly using flexbox, etc.)指定元素间距的最佳 CSS 方法（可能使用 flexbox 等）
【发布时间】：2013-08-04 03:18:08
【问题描述】：

在 CSS 中指定元素间距的最佳方法是什么？

我目前使用以下规则在.container 元素的每个子元素之间指定0.3rem 空格，而不在第一个子元素之前或最后一个子元素之后添加任何空格。

.container > * + * {
  margin-left:0.3rem;
}

有没有更清洁/更高效的方法来做到这一点？我想一个适当的 CSS 属性应用于 .container 而不是它的所有子元素会更好，但我还没有找到这样的属性。

Flexbox 和/或其他最近的 CSS 改进完全可以接受。

我的目标是最近的 Chrome 版本（目前，stable 版本为 28，dev 版本为 30），但任何浏览器的解决方案都将不胜感激。

谢谢。

【问题讨论】：

您认为 Flexbox 为何会用于此目的？
我认为 flexbox 对此没有用处，因为我在 W3C flexbox 规范中找不到任何真正做到这一点的东西。我引用它作为我愿意使用的较新 CSS 规范的示例。然而，在阅读整个 flexbox 规范之前，我希望它会有这样的 CSS 属性，因为将它包含在 CSS 中是明智的，而且 flexbox 是一个比其他 CSS / HTML 布局更明智的布局规范我已经用过。
你已有的有问题吗？
它目前可以工作，但如果存在，我更愿意使用更简洁、更高效的 CSS 规则。
我也在寻找这个问题的答案。 @XDR，您找到解决方案了吗？我喜欢上面给出的解决方案，尽管在使用 flexbox order 属性对 .container 的子元素进行排序时确实遇到了问题。我目前正在使用：.flex > *:not(:last-child) { margin-right: 97px; }。如果我找到比这里已经提出的更好的解决方案，我会发布答案。

标签： css spacing margins

【解决方案1】：

是的，你可以试试这个：

.container > .item:first-child{margin-left:0;}

完整示例：

.clearfix{
 display:table;  
}

.clearfix:after, .clearfix:before{  
 clear:both;  
}

.container{
 background-color:gray;  
}

.container > .item{
  width:100px;
  height:100px;
  background-color:lightblue;

  float:left;
  margin-left: 3em;
}

.container > .item:first-child{
 margin-left:0;  
}

<div class="container clearfix">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

Toy 可以通过以下方式实现它：flexbox、inline-block 或 grid system（float）

【讨论】：