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

只需将display: inline-block;添加到.circle类中即可。

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

Answer 2

我只是建议您在标签上添加margin。

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

检查fiddle：

Answer 3

首先你没有添加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%;
}