Đệm giữa hộp kiểm và nhãn

Question

Đối với CSS rất kinh nghiệm, đánh dấu này xuất ra hộp kiểm có nhãn Value1 ở bên phải, nhưng Value1 quá gần hộp kiểm.

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

Vì vậy, tôi đang cố gắng tạo hiệu ứng padding-right ở bên phải hộp kiểm, nhưng nó không hoạt động. Hộp kiểm và nhãn di chuyển cùng nhau. Làm thế nào tôi có thể nhắm mục tiêu hộp kiểm chỉ hoặc văn bản của nó chỉ vì vậy tôi tạo ra một khoảng cách padding?

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

Answer 1

Sử dụng margin-right. padding nằm bên trong phần tử và thường hoạt động hài hước với các yếu tố đầu vào bởi vì chúng được hiển thị bằng các thành phần gốc tự nhiên của hệ điều hành và là một mớ hỗn độn để tùy chỉnh nói chung.

JSFiddle here

Answer 2

Không khoảng cách không thể nhấp vào giữa hộp và nhãn.
Không ngắt kết nối đường kẻ của hộp kiểm và nhãn.
Không có khoảng trắng nào được thêm vào bằng mã thụt đầu dòng.
Dễ đọc hơn.

<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>