Strange bottom padding when I use doctype

HTML & CSS
1 
[b]test1.htm[/b]
<html>
  <body>
<table>
  <tr>
    <td style="background:red"><a href="test2.htm"><img src="test.jpg" width="300"></a></td>
  </tr>
</table>
  </body>
</html>

[b]test2.htm[/b]
[COLOR="#FF0000"]<!doctype html>[/COLOR]
<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>?

2

Never put up a page without a doctype. Just don’t. :slight_smile:

The second example is the right behavior. To remove the gap at the bottom, you can do either

img {vertical-align: bottom}

or

img {display: block;}

but the first option is better because it addresses the actual issue. By default, images are inline elements, and are set to align with the baseline of any text that might sit beside them. That means there is space left below the image to account for text descenders (like the stick on a “p”).

Off Topic:

This issue has been explained so many times online that I’m sure if you goole “small space below image” or similar you’ll find millions of replies like mine. :slight_smile: