CODEWITHSUNDEEP
htmllayoutxhtml
PurkkaKoodari
PurkkaKoodari

Reputation: 6809

Where is this blank space coming from?

I have a webpage that contains a picture inside a table cell. But, in the table cell there is also an additional 5px on the bottom.

I simplified the code to the max:

<!DOCTYPE html>
<html>
<head>
<title>Random page</title>
</head>
<body>
<table>
<tr>
<td style="border: 1px solid black">
<img style="border: 1px solid red" src="picture.png" />
</td>
</tr>
</table>
</body>
</html>

The result, in Firefox 25 and Internet Explorer 10:

Result

As you can notice there is blank space in the bottom.

I know this could be caused by whitespaces, so I removed all of them between tags. No effect.

The weirdest part is, if I remove the DOCTYPE specification, or replace it with HTML or XHTML Transitional (Strict does not work), it starts to work.

Is this a weird quirk of HTML/XHTML Strict or what? Can it be worked around and how?

Upvotes: 2

Views: 314

Answers (3)

RichieHindle
RichieHindle

Reputation: 281695

Explanation: By default, the bottom of an image lines up with the baseline of the surrounding text. The gap you're seeing is for the decenders of any descending letters (q, y, p, g) that surround the image. The fact that you have no surrounding text makes no difference - space is still reserved for it.

Solution: You need to align the bottom of the image with the bottom of the line, rather than the baseline:

img {
    vertical-align: bottom;
}

Here's a working fiddle.

Upvotes: 2

Rob White
Rob White

Reputation: 1002

set your img to

display:block;

that should solve it

Upvotes: 2

blue
blue

Reputation: 1949

Put the closing cell tag immediately after the image, like:

<img style="border: 1px solid red" src="picture.png" /></td>

Upvotes: -1

Related Questions