单选按钮和标签之间的间距因元素不同而不同

Question

我不明白为什么第一个元素的无线输入和链接之间的间距与其他两个元素的间距不同。

下面是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

由于某些原因，在未应用任何css的情况下，mla单选按钮与MLA链接的距离比其他单选按钮与其相邻链接的距离更近。

(我知道HTML并不完全正确。如果可能的话，我不得不让HTML保持原样。)

Answer 1

在<a之前有一个空格，jsfiddle正在解释它。第一个MLA链接没有这个空间，这就是为什么它离单选按钮更近的原因

在此之前

id="apa_button"> <a

修复后-

id="apa_button"><a