<form> </form>元素与<h1>之间的空格/边距

Question

<table>和<h1>之间有大量的空格，它们都在一个form元素中。一旦删除<table>元素，该空格就会消失。我正在使用<table>元素将元素与表单对齐。有人可以解释为什么会这样吗？

<form>
  <h2>Form Heading goes here</h2>
  <table>
    <tr>
      <td>First Name</td>
      <td><input type="text" name="f_name"></td>
    </tr>
    <tr>
      <td>Last Name</td>
      <td><input type="text" name="l_name"></td>
    </tr>
  </table>
</form>

Answer 1

默认情况下，h2标签会在其下添加边距。以下CSS将删除该空间。

CSS

h2 {
  margin-bottom: 0;
}

Answer 2

您必须删除<h2>标签的默认边距。

h2{
margin: 0; 
}

<form>
  <h2>Form Heading goes here</h2>
  <table>
    <tr>
      <td>First Name</td>
      <td><input type="text" name="f_name"></td>
    </tr>
    <tr>
      <td>Last Name</td>
      <td><input type="text" name="l_name"></td>
    </tr>
  </table>
</form>