css - 指定元素间间距的最佳 CSS 方法(可能使用 flexbox 等)

Question

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

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

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

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

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

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

谢谢。

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

玩具可以通过:flexbox、inline-block 或网格系统( float )