Question

我在fieldset内使用了一张桌子，传说中有一个空格，我想把它移除。我尝试在padding:0px和图例内联样式上使用margin:0px和fieldset。但都没有效果。请帮我一些建议。

谢谢！

编辑：

由于我使用的是选择菜单，因此代码非常庞大。但这里是代码的概述。

<fieldset>
          <legend><b>Options</b></legend>
          <table>
            <tr>
              <td colspan="1"><label>Passengers:&nbsp; </label></td></tr></table>    
</fieldset>

margin和padding适用于fieldset，但它对于图例没有任何作用。有没有办法消除传奇产生的差距？

Answer 1

根据Eric Meyer's reset，字段集和图例上的margin:0;和padding:0;应该可以胜任。

Testing your code in a fiddle它实际上有效，因此可能导致此问题的其他一些事情是：

在表格上设置填充/边距/ td
标签的行高/ td

Answer 2

默认呈现可能包括旨在使文档外观清晰的填充。默认值因浏览器而异，但它们可能包括fieldset和legend上的垂直填充，并且它们几乎肯定包含td元素上的垂直填充。要删除此类填充，您可以设置：

legend { 
  padding-top: 0;
  padding-bottom: 0;
}
fieldset, td { 
  padding-top: 0;
}

但默认情况下，表格单元格之间也有间距，这意味着即使在单单元格表格中，单元格周围也会有一些间距。删除它的跨浏览器方式是：

table {
  border-collapse: collapse;
}

添加此选项会删除图例和单元格内容之间的间距（您可以通过在IE和Chrome上的legend和label元素上设置背景颜色来查看）。在Firefox上，一个像素的差距似乎仍然存在，没有明显的解释。

Answer 3

要删除标签下面的空格，请使用margin-top：-ve px;

就像：

<fieldset> <legend><b>Options</b></legend> <table style="margin-top:-13px;"> <tr> <td colspan="1"><label>Passengers:  </label></td></tr></table> </fieldset>

Answer 4

字段集和图例的浏览器格式在浏览器之间差异很大，但无论如何都是一团糟。

如果你的开放字段集标记和第一个标记之间有空格，那么firefox会添加BREAKS。同样适用于传说。

解决问题的最简单方法是删除标记之间的所有空格。

Answer 5

我也只是在与此作斗争，以便在字段集中使用绝对定位时在浏览器之间获得相同的行为。

向legend添加fieldset时发现的情况是，Chrome和IE会将字段集的顶部边框向下移动到文本的中间位置，但所包含的元素仍然存在相对于字段集的原始顶部定位。但Firefox也会将所包含元素的顶部移动到图例下方。 FF还允许在图例文本本身的上方和下方留出空间。

我终于能够通过添加这个CSS来克服它：

legend {
   line-height: 0;
}

然后添加图例而不移动顶部边框，Chrome，IE和FF中的定位相同。

如何删除fieldset图例下面的空格

5 个答案: