B. Clay Shannon B. Clay Shannon - 7 months ago 19
HTML Question

Why is my left margin not being applied to my radio button?

I've got this CSS:

.leftmarginbreathingroom {
margin-left: 8px;
}


...and this HTML:

<div class="row">
<div class="col-md-12">
<h4 class="h4 sectiontext leftmarginbreathingroom">Generate and Email Reports</h4>
</div>
</div>

@* "On a specific day of the month" radio button and Day of month selection element *@
<div class="row">
<div class="col-md-12">
<input type="radio" id="groupRptGenerationAndSendingByDayOfMonth" class="leftmarginbreathingroom" value="day">On a specific day of the month:
<select id="dayofmonthselect" class="leftmarginbreathingroom">
@foreach (String day in daysOfMonth)
{
<option id="selItem_@(day) value=" day">@day</option>
}
</select>
<label> of each month</label>
</div>
</div>

@* "Based on a pattern" radio button and select elements *@
<div class="row">
<div class="col-md-12">
<input type="radio" id="groupRptGenerationAndSendingBasedOnAPattern" class="leftmarginbreathingroom" value="pattern">Based on a pattern
<select id="ordinalselect" class="leftmarginbreathingroom">
@foreach (String ord in ordinalWeeksOfMonth)
{
<option id="selItem_@(ord) value=" ord">@ord</option>
}
</select>
<select id="dayofweekselect">
@foreach (String dow in daysOfWeek)
{
<option id="selItem_@(dow) value="dow">@dow</option>
}
</select>
<label> of each</label>
<select id="weekormonthselect">
@foreach (String pf in patternFrequency)
{
if (pf == "Month")
{
<option id="selItem_@(pf)" value="@pf" selected="selected">@pf</option>
}
else
{
<option id="selItem_@(pf) value="pf">@pf</option>
}
}
</select>
</div>
</div>


...and yet, although the left margin is applied to the h4 element and the select element, it is not applied to the input radio element:

enter image description here

Why not? How can I get the radio button to also head east in pixelstep with the other elements?

Answer

Try adding !important exception to your code:

.leftmarginbreathingroom {
    margin-left: 8px !important;
}