Onay kutusu ve etiket arasındaki dolgu

Question

Bu işaretleme CSS gurubu için sağda Value1 etiketli bir onay kutusu çıkarır, ancak Value1 onay kutusuna çok yakındır.

<dd id="rr-element"> 
    <label for="rr-1"> 
     <input type="checkbox" value="1" id="rr-1" name="rr[]"> 
     Value 1 
    </label> 
</dd> 

yüzden onay kutusunun sağındaki bir padding-right etki oluşturmak için çalışıyorum ama işe yaramıyor. Onay kutusu ve etiket birlikte hareket eder. Yalnızca onay kutusunu veya yalnızca metnini nasıl hedefleyebilirim, böylece bir dolgu boşluğu oluşturabilir miyim?

dd label input { 
    padding-right:100px; 
} 

Answer 1

margin-right'u kullanın. padding, öğenin içinde yer alır ve genellikle giriş öğelerinde komik davranır, çünkü bunlar işletim sisteminin yerel girdi bileşenleri kullanılarak oluşturulur ve genel olarak özelleştirilebilen bir karmaşadır. onay kutusu ve etiket arasında

JSFiddle here

Answer 2

yok tıklanamayan boşluk.
Onay kutusunun ve etiketin satır sarma bağlantısı kesilmiyor.
Kod girintileri ile boşluk eklenmez.
Daha fazla okunabilir.

<dd id="rr-element"> 
    <input type="checkbox" value="1" id="rr-1" name="rr[]"> 
    <label for="rr-1">Value 1</label> 
</dd> 

<style> 
#rr-element { 
    white-space: nowrap; 
} 

#rr-element label { 
    padding-left: 0.4em; 
} 
</style>