Javascript jquery移动控制组之间的空格

我正在尝试使用jQuery移动可折叠小部件。然而，使用直接来自（特别是图例）的代码，我注意到控制组之间有空格

<form>
    <fieldset data-role="collapsible">
        <legend>Legend</legend>
        <div data-role="controlgroup">
            <input type="checkbox" name="checkbox-1-a" id="checkbox-1-a" />
            <label for="checkbox-1-a">One</label>
            <input type="checkbox" name="checkbox-2-a" id="checkbox-2-a" />
            <label for="checkbox-2-a">Two</label>
            <input type="checkbox" name="checkbox-3-a" id="checkbox-3-a" />
            <label for="checkbox-3-a">Three</label>
        </div>
    </fieldset>
</form>

    
传奇
        
一个
两个
三
        
    

---

有没有办法去掉这些？我尝试通过默认css查看是否有可以更改的属性，但找不到任何内容。这是我的代码，显示了空格和代码。任何帮助都将不胜感激

这些间隙是html标记中的空白和换行造成的。这是为我做的：

<form>
    <fieldset data-role="collapsible">
        <legend>Legend</legend>
        <div data-role="controlgroup">
            <input type="checkbox" name="checkbox-1-a" id="checkbox-1-a"><label for="checkbox-1-a">One</label><input type="checkbox" name="checkbox-2-a" id="checkbox-2-a"><label for="checkbox-2-a">Two</label><input type="checkbox" name="checkbox-3-a" id="checkbox-3-a"><label for="checkbox-3-a">Three</label>
        </div>
    </fieldset>
</form>

    
传奇
        
一二三
        
    

或者，让html标记不那么难看：

<form>
    <fieldset data-role="collapsible">
        <legend>Legend</legend>
        <div data-role="controlgroup">
            <input 
                type="checkbox" name="checkbox-1-a" id="checkbox-1-a"><label
                for="checkbox-1-a">One</label><input
                type="checkbox" name="checkbox-2-a" id="checkbox-2-a"><label
                for="checkbox-2-a">Two</label><input
                type="checkbox" name="checkbox-3-a" id="checkbox-3-a"><label
                for="checkbox-3-a">Three</label>
        </div>
    </fieldset>
</form>

    
传奇
        
一二三
        
    

Ah的可能重复，这是有道理的。看来我确实有多余的空间和休息，我不需要。非常感谢。