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

【问题标题】：Space between radio button and label different for different elements单选按钮和标签之间的空间因不同元素而异
【发布时间】：2013-06-16 13:32:29
【问题描述】：

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

这里是 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 不变。）

【问题讨论】：

标签： html radio-button label spacing

【解决方案1】：

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

之前 -

id="apa_button"> <a

修复后 -

id="apa_button"><a

【讨论】：