Add White Space Between Checkboxlist Text and Checkbox

Question

I am attempting to use a cssclass to add whitespace. I have coded with the below, but I am not getting any extra whitespace.

What is the proper way to code for this?

.checkboxlistformat {
    margin-left:30px;
}


<div align="center" runat="server" id="checkboxlistdiv">
    <asp:CheckBoxList ID="checkboxlisttest" CssClass="checkboxlistformat" runat="server" RepeatLayout="table" RepeatColumns="4" RepeatDirection="vertical" OnSelectedIndexChanged="checkboxlist_SIC_SelectedIndexChanged"></asp:CheckBoxList>
</div>

Answer 1

Assuming your ASP generates a corresponding <label> for the text. You can target the text with an ancestor descendant selector as .checkboxlistformat label:

.checkboxlistformat label {
  margin-left: 30px;
}

<input id="checkboxlisttest" type="checkbox" class="checkboxlistformat">
<label for="checkboxlisttest">Checkbox</label>

Alternatively, you could always simply place the margin on the right of the checkbox:

.checkboxlistformat {
  margin-right: 30px;
}

<input id="checkboxlisttest" type="checkbox" class="checkboxlistformat">
<label for="checkboxlisttest">Checkbox</label>

Hope this helps! :)