如何在CSS中的內聯塊複選框之間創建空間

Question

我已經創建了checkboxes列表，並在標籤上使用了border-radius，現在每個複選框的邊框相互接觸或通過彼此的邊框。

CSS

.interest { 
    display:inline-block !important; 
} 

.bubble { 
    position: absolute; 
    left: -9999px; 
    top: 0; 
} 

.circle { 
    border: 1px solid #000; 
    padding: 15px; 
    border-radius: 50%; 
} 

fiddle example

Answer 1

我只會鼓勵你添加margin到您的標籤。

label { 
    margin: 30px 2px; 
    float: left; 
} 

入住此fiddle：

Answer 2

首先，你沒有添加HTML，所以我不知道HTML標籤是你註明這些值到。其次，我想你可以設置一些利潤的泡沫，如果這些都泡在你的觀點：

.interest { 
    display:inline-block !important; 
} 

.bubble { 
    margin: 5px; 
    position: absolute; 
    left: -9999px; 
    top: 0; 
} 

.circle { 
    border: 1px solid #000; 
    padding: 15px; 
    border-radius: 50%; 
} 

Answer 3

只需添加display: inline-block;到.circle類，這將是完美的。

http://codepen.io/diego-fortes/pen/bBpRbx