CODEWITHSUNDEEP
htmlradio-buttonlabelspacing
dmr
dmr

Reputation: 22323

Space between radio button and label different for different elements

I can't figure out why the spacing between the radio input and link is different for the first element than for the other two.

Here is the HTML:

<div class="citationChoice">    
    <label for="mla">
        <input type="radio" name="citation" value="mla" id="mla_button" checked="checked">
        <a href="javascript:void(0);" id="mla_text">MLA</a>
    </label> 

    <label for="apa">
        <input type="radio" name="citation" value="apa" id="apa_button"> 
        <a href="javascript:void(0);" id="apa_text">APA</a>
    </label> 

    <label for="chicago">
        <input type="radio" name="citation" value="chicago" id="chicago_button"> 
        <a href="javascript:void(0);" id="chicago_text">Chicago Manual of Style</a>
    </label> 
</div>

jsFiddle

For some reason, without any css applied, the mla radio button is closer to the MLA link than the other radio buttons are to their adjacent links.

(I know the HTML is not completely correct. If at all possible, I have to leave the HTML as is.)

Upvotes: 0

Views: 385

Answers (1)

hackg
hackg

Reputation: 95

You had a space before <a and jsfiddle was interpreting that. The first MLA link did not have this space, that is why it sat closer to the radio button

BEFORE - 

id="apa_button"> <a

AFTER FIX - 

id="apa_button"><a

Upvotes: 2

Related Questions