はどのように私は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チェック：単純に、●クラスにdisplay: inline-block;を追加し、それが完璧になります

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

を。

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