Html 表格上方显示空格（仅限Chrome）

我有一个表单，它有一个图例和一组字段。我正在使用Bootstrap 2.x来设计它。出于某种原因，空格出现在表单上方，但仅在Chrome中出现（在IE10和Firefox中呈现良好效果）。我已将其缩减为基本内容，以演示我遇到的问题：

<form>
    <fieldset>
        <legend>Legend</legend>

        <div class="control-group">
            <!-- This div results in the space appearing above the form -->
            <label class="control-label">First Name</label>
            <div class="controls">
                <input type="text" />
            </div>
        </div>
    </fieldset>
</form>

传奇
名字

如果我从包装输入字段的div中删除class=“control group”，则空格会神奇地消失，尽管看起来与此问题无关。我已经检查了Chrome中所有内容的边距和填充，但什么都没有，所以我不知道这个间距是从哪里来的。我需要在这些字段div上使用这个类，因为我正在实现一个水平表单。我正在竭尽全力想办法解决这个问题，有什么想法吗？下面是一个要演示的JSFIDLE：

任何帮助都将不胜感激

您可以从中获得20页边距：

legend+。控制组

---

您从中获得20页边距：

legend+。控制组
这是因为
的引导CSS规则具有
页边距底部：20px

只需添加一个CSS规则：

legend {

margin-bottom: 0px;

}

此外，您只能将其添加到图例标签中：

<legend style="margin-bottom: 0px;">

// Whatever you want

</legend>


//随便你

这是因为
的引导CSS规则具有
边距底部：20px

只需添加一个CSS规则：

legend {

margin-bottom: 0px;

}

此外，您只能将其添加到图例标签中：

<legend style="margin-bottom: 0px;">

// Whatever you want

</legend>


//随便你

而不是

legend+.control-group {
    margin-top: 20px;
}

用这个。
它将保留当前布局并删除窗体上方的空间

legend+.control-group {
    padding-top: 20px;
}

而不是

legend+.control-group {
    margin-top: 20px;
}

用这个。
它将保留当前布局并删除窗体上方的空间

legend+.control-group {
    padding-top: 20px;
}

好的，哇，太快了。我甚至无法将它标记为已回答，因为他们让我等了5分钟！谢谢你，我已经为此挠头一个小时了！你如何确定这一点？Chrome调试工具根本没有给我显示任何余量，无论是在度量还是计算风格上，这使得跟踪它变得异常困难。我确实用Chrome在JSFIDLE上检查了你的表单，显然你错过了。休息一会儿：）好的，我现在明白了。我非常困惑，因为页边空白处的顶部是对照组的div，而不是图例（正如我所预料的那样）。再次感谢！好的，哇，太快了。我甚至无法将它标记为已回答，因为他们让我等了5分钟！谢谢你，我已经为此挠头一个小时了！你如何确定这一点？Chrome调试工具根本没有给我显示任何余量，无论是在度量还是计算风格上，这使得跟踪它变得异常困难。我确实用Chrome在JSFIDLE上检查了你的表单，显然你错过了。休息一会儿：）好的，我现在明白了。我非常困惑，因为页边空白处的顶部是对照组的div，而不是图例（正如我所预料的那样）。再次感谢！谢谢你的回答，但是比第一个正确的答案晚了一点，但是请为你的努力投上一票。别担心。请记住，应用@Panagiotis George Raditsas解决方案仅在您拥有legend+div class=控制组时有效。如果只使用图例，您将遇到相同的问题：）谢谢：）。对于我的特定场景，这不是一个问题，但你可能是对的-有一个css规则只针对图例通常是一个更好的主意。谢谢你的答案，但比第一个正确答案晚了一点，但对你的努力投赞成票。别担心。请记住，应用@Panagiotis George Raditsas解决方案仅在您拥有legend+div class=控制组时有效。如果只使用图例，您将遇到相同的问题：）谢谢：）。对于我的特定场景，这不是一个问题，但你可能是对的-有一个只针对图例的css规则通常是一个更好的主意。谢谢，是的，这是另两个回答者也指出的令人不快的css规则，但是我不同意你所建议的修改引导CSS，因为我认为最好用我自己的规则覆盖现有的规则，这样就可以升级到新版本的引导CSS。无论如何谢谢你！你是对的，我没有意识到我正在修改的是引导css。谢谢，是的，这是另外两位回答者也指出的令人不快的css规则，但我不同意按照你的建议修改引导css，因为我认为最好用我自己的规则覆盖现有的规则，使升级到新版本的引导成为可能。无论如何谢谢你！你说得对，我不知道我修改的是引导css。