Menu
JSFiddle
How would I go about editing the HTML/CSS to create spacing between each checkbox/value pairing? Right now each checkbox and each value are spaced evenly. I'd like value1 to be close to checkbox1, but checkbox2 to have some distance from the value1.
Code here:
.checkboxes {
text-align:center;
}
.checkboxes input{
margin: 0 20px 0;
}
<div class="checkboxes">
<span>
<input type="checkbox" name="One" value="One"> One
<input type="checkbox" name="Two" value="Two"> Two
<input type="checkbox" name="Three" value="Three"> Three
<input type="checkbox" name="Four" value="Four"> Four
</span>
</div>
863
Use This Code
.checkboxes {
text-align:center;
}
.checkboxes input{
margin: 0px 0px 0px 0px;
}
.checkboxes label{
margin: 0px 20px 0px 3px;
}<html>
<head></head>
<body>
<div class="checkboxes">
<span>
<input type="checkbox" name="Mow" value="Mow"> <label>One</label>
<input type="checkbox" name="Weedeat" value="Weedeat"> <label>Two</label>
<input type="checkbox" name="Edge" value="Edge"> <label>Three</label>
<input type="checkbox" name="Other" value="Other"> <label>Four</label>
</span>
</div>
</body>
</html>you need to reduce right margin a bit and may need to increase left margin
.checkboxes input{
margin: 0 5px 0 30px;
}
.checkboxes {
text-align:center;
}
.checkboxes input{
margin: 0 5px 0 30px;
} <div class="checkboxes">
<span>
<input type="checkbox" name="Mow" value="Mow"> One
<input type="checkbox" name="Weedeat" value="Weedeat"> Two
<input type="checkbox" name="Edge" value="Edge"> Three
<input type="checkbox" name="Other" value="Other"> Four
</span>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
