I want to a gap between a checkbox and a span. I wrap a checkbox and a span in label element.
i tried all possible ways to add a gap between the two elements but didn’t work. pls, help
HERE IS THE HTML
<div class="options">
<label>
<input type="checkbox">
<span>Keep me logged in</span>
</label>
<a href="#">Reset Password</a>
</div>
HERE IS THE CSS
/*.options {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.options label {
display: flex;
align-items: center;
color: #777;
}
.options .input[type="checkbox"] {
margin-right: 1px;
*/
This is not the correct way of using the label tag.
you could just go with
<input type="checkbox" id="input1"> <label for="input1" class="label1">Keep me logged in</label>
The for attribute can be used to associate a label with an input
you can wrap both inside div element if you have multiple and just put spacing using class added to label and margin css
<div class="options">
<div>
<label for="cb1">Keep me logged in</label>
<input type="checkbox" id="cb1">
</div>
<a href="#">Reset Password</a>
</div>
.options {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.options div {
display: flex;
align-items: center;
color: #777;
}
.options label {
margin-right: 20px;
}
https://jsfiddle.net/#&togetherjs=NIVyFopLUh