html - 单选按钮和标签之间的空间因不同元素而异

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