Question

I have been using this table for a while now and all of a sudden its broken now. I have CSS in my files for it but for whatever reason its now adding a blank line to the bottom of the table row after the form image is posted. It does this even with this same table with no CSS. I have tried table height, spacing, the works. I cannot figure out why there is a blank line here. I apologize if it turns out to be a stupid fix I have searched and tried many fixes.

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

The forms of the tds have a margin. Add following css:

form {
    margin: 0;
}

To prevent more of this behaviours you should include e.g. a normalize.css instead.