SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    strange bottom padding when I use doctype

    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>?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,172
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Never put up a page without a doctype. Just don't.

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

    Code:
    img {vertical-align: bottom}
    or

    Code:
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •