<form> 元素的 <table> 和 <h1> 之间的空白/边距答案

【问题标题】：Whitespace/Margin between <table> and <h1> of a <form> element<form> 元素的 <table> 和 <h1> 之间的空白/边距
【发布时间】：2018-11-28 19:56:59
【问题描述】：

<table> 和 <h1> 之间有大量空白，两者都在表单元素中。一旦我删除 <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>

【问题讨论】：

第 1 步，不要使用表格进行布局，使用 CSS。将表格用于表格数据。这已经不是 1997 年了。
确保<h1> 或<table> 元素上没有任何填充或边距。您可以使用<table style="marign:0; padding:0;"> 删除，如果这不起作用，<h1> 也是如此。

标签： css html html-table forms

【解决方案1】：

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

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>

【讨论】：

【解决方案2】：

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

CSS

h2 {
  margin-bottom: 0;
}

【讨论】：