如何在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