CSS的float邊際分離左

Question

當數據處理驅動的內容，由此，我們不知道將要生成的元素數量：

每個元素都應該浮動：左，並肩而坐，直到他們之前進行排做另一個。

我想每個元素之間有一些分離。如果我應用MARGIN或PADDING，它也會影響到最終的元素。我想要的是一行中每個元素之間的特定數量的像素的分離。

例如：

.container { 
    width:1000px; 
} 
.bubble { 
    width:240px; height:200px; margin-right:10px; 
} 
<div class="container"> 
<div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div>(would put a margin here too which we do not want) 
<div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div>(would put a margin here too which we do not want) 
<div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div>(would put a margin here too which we do not want) 
</div> 

Answer 1

這是一招，當我遇到這樣的東西我通常使用。

.container { 
    margin: -10px 0 0 -10px; 
} 
.bubble { 
    margin: 10px 0 0 10px; 
} 

這將抵消容器和框將遵循。如果你沒有將更多的樣式應用於實際包裝物品的div（在這種情況下爲.bubble），用戶將不會看到它，並且你將擁有包含邊距的完美網格！