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

Question

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:

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

score 3 · Accepted Answer · answered May 05 '16 at 23:14

3

Try adding !important exception to your code:

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

answered May 05 '16 at 23:14

Francisco Romero

12,787
22
92
167

score 1 · Answer 2 · answered May 05 '16 at 23:18

Input elements sometimes have a default margin setting. Somewhere in your CSS there might be a

input { margin: 0 !important; }

which would prevent your .leftmarginbreathingroom rule from going into effect. To counter that, adding !important to your rule would work.

score 0 · Answer 3 · answered Jan 27 '22 at 20:40

0

not crct but just a hack

<span className="text-white">hhh</span><input type="radio"  >...</input>

answered Jan 27 '22 at 20:40

Haradeep Mara

1

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

3 Answers3