在相邻元素之间添加边距而不向父容器添加内边距

Question

好吧，我想不出一个解释这个的好方法，所以这里有一个可能有用的图形。

我有一个3列内联块元素网格，需要在它们之间有一个边距。但是，每行的第1个/第3个元素与父容器之间不应有间距。有没有一个光滑的方式来做到这一点，尤其是CSS？我愿意接受任何可行的技术。

Html基本上是这样的：

<section>
  <article class=“box”>
    <img class="thumb" src="img/image.jpg">
    <p>Name</p>
  </article>
  <article class=“box”>
    <img class="thumb" src="img/image.jpg">
    <p>Name</p>
  </article>
  <article class=“box”>
    <img class="thumb" src="img/image.jpg">
    <p>Name</p>
  </article>
</section>

Answer 1

您可以使用nth-child伪类来选择第三个元素并删除边距，如：

.box {
    margin-right:10px;
}
.box:nth-child(3n) {
    margin-right:0px;
}

<强> jsFiddle example