Question

I am using a table inside fieldset and there is a gap below legend, I wand to remove it. I tried using padding:0px and margin:0px on both fieldset and legend inline style. But none worked. Please help me with some suggestions.

Thanks!

Edit:

The code is very huge since I am using select menu. But here is the overview of the code.

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

margin and padding is working for fieldset but it is doing nothing for legend. Is there any way to remove the gap produced by legend?

Answer 1

Default rendering may include padding intended to make the document appearance legible. The defaults vary by browser, but they may include vertical padding on fieldset and legend, and they almost certainly include vertical padding on td elements. To remove such padding, you can set:

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

But there’s also spacing between table cells by default, and this means that there is some spacing around a cell even in a single-cell table. The cross-browser way to remove that is:

table {
  border-collapse: collapse;
}

Adding this removes the spacing between the legend and the cell content (you can see this by setting background colors on the legend and label elements) on IE and Chrome. On Firefox, a one-pixel gap seems to remain, with no obvious explanation.