Code:
test1.htm
<html>
  <body>
<table>
  <tr>
    <td style="background:red"><a href="test2.htm"><img src="test.jpg" width="300"></a></td>
  </tr>
</table>
  </body>
</html>

test2.htm
<!doctype html>
<html>
  <body>
<table>
  <tr>
    <td style="background:red"><a href="test2.htm"><img src="test.jpg" width="300"></a></td>
  </tr>
</table>
  </body>
</html>
I have 2 pages like the above.
Each page has an image.
You can see it at http://dot.kr/x-test/test1.htm.
If you click the image at http://dot.kr/x-test/test1.htm, it will go to http://dot.kr/x-test/test2.htm.
If you click the image at http://dot.kr/x-test/test2.htm, it will go to http://dot.kr/x-test/test1.htm.

Please notice there is some unnecessary bottom padding in red at test2.htm.
I like to remove the unnecessary bottom padding at test2.htm.

On the contrary, the unnecessary bottom padding is NOT shown at test1.htm.

The only difference between test1.htm and test2.htm is <!doctype html>.
How can I remove the unnecessary bottom padding at test2.htm with using <!doctype html>?