Question

我一直在使用这张桌子一会儿，现在突然间它被打破了。我的文件中有CSS，但无论出于何种原因，它现在在表单图像发布后在表格行的底部添加一个空行。即使使用没有CSS的同一个表，它也能做到这一点。我试过桌子高度，间距，工作。我无法弄清楚为什么这里有一个空白行。如果事实证明这是我搜索过的一个愚蠢的修复并尝试了许多修复，我深表歉意。

HERE IS AN EXAMPLE

<table border="1">
      <tr>
        <td></td>

        <td>
          <form action="" method="post">
            <div>
              <input type="hidden" name="id" value="" />
              <input type="hidden" name="d" value="1" />
              <input type="image" src="../resources/img/direction/up_arrow.png" alt="Up" width="62" height="62" />
            </div>
          </form>
        </td>

        <td></td>
      </tr>

      <tr>
        <td>
          <form action="" method="post">
            <div>
              <input type="hidden" name="id" value="" />
              <input type="hidden" name="d" value="2" />
              <input type="image" src="../resources/img/direction/left_arrow.png" alt="Left" width="62" height="62" />
            </div>
          </form>
        </td>

        <td>
          <form action="" method="post">
            <div>
              <input type="hidden" name="id" value="" />
              <input type="hidden" name="r" value="1" />
              <input type="image" src="../resources/img/direction/rest_button.png" alt="Rest" width="62" height="62" />
            </div>
          </form>
        </td>

        <td>
          <form action="" method="post">
            <div>
              <input type="hidden" name="id" value="" />
              <input type="hidden" name="d" value="3" />
              <input type="image" src="../resources/img/direction/right_arrow.png" alt="Right" width="62" height="62" />
            </div>
          </form>
        </td>
      </tr>

      <tr>
        <td></td>

        <td>
          <form action="" method="post">
            <div>
              <input type="hidden" name="id" value="" />
              <input type="hidden" name="d" value="4" />
              <input type="image" src="../resources/img/direction/down_arrow.png" alt="Down" width="62" height="62" />
            </div>
          </form>
        </td>

        <td></td>
      </tr>
    </table>

Answer 1

form的{{1}} s有余量。添加以下css：

td

为防止出现更多此类行为，您应该包含以下内容：改为normalize.css。

Answer 2

这个css将解决你的问题：

form {margin:0;padding:0}

额外的空间基本上来自你的形式。你可能从css中删除了一些旧代码，这就是它突然崩溃的原因。

HTML表格在行的底部添加空格。

2 个答案: