添加相鄰元素之間的邊距，但不向父容器添加內邊距

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