I’m trying to make a page with an image meant for being loaded in an iframe. But there is 4px of space at the bottom of the body tag that I can’t seem to get rid of. Heres my simplified source:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
body, a, head, img
{ margin: 0;
padding: 0;
border: none;
border-width: 0px;
}
</style>
</head>
<body>
<a><img src="http://www.halolz.com/wp-content/uploads/2008/09/portals.jpg"></a>
</body>
</html>
You’ll notice if you shrink your window within 4 pixels of the bottom of the image, you’ll get a scroll bar. Where the crap is that space coming from?
The image is placed on the base line of the text line that it’s in. The space below the image is the distance between the base line and the bottom of the character cell, where there is space for hanging characters like
gandj. With the default font and font size of your browser that happens to be four pixels, you will get slightly different results in other browsers.One solution is to make the image a block element, that way it’s not part of a text line, and doesn’t have a space below the base line. The anchor tag is an inline element and it can’t have a block element inside it, so to make the elements make sense after the style is applied you have to make the anchor tag a block element also:
(To make the code valid XHTML you would also need a block element outside the anchor tag, the body tag can’t contain inline elements directly. Making the anchor tag a block element using style doesn’t help, the structure has to be valid also before the style is applied.)