3

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

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

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

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

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

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

谢谢。

4

1 回答 1

0

是的，你可以试试这个：

.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或网格系统（float）

于 2015-03-17T11:41:57.660 回答