1

This is driving me crazy, so I thought I'll ask if anybody could explain why there is narrow bottom margin added under the image when the image is placed inside div/cell with background color. Here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>
<head>
<title>Problem</title>
</head>

<style type="text/css">
.color_table {
    background-color: #8c0067;
    width: 200px;
    align: center;
}
.color_div {
    background-color: #8c0067;
    width: 200px;
}
</style>

<body>

<table>
<tr>
<td class="color_table">
<img src="http://www.gravatar.com/avatar/4253171452772bb013319698f2ddbfc4?s=128&d=identicon&r=PG">
</td>
</tr>
</table>

<hr>

<div class="color_div">
<img src="http://www.gravatar.com/avatar/4253171452772bb013319698f2ddbfc4?s=128&d=identicon&r=PG">
</div>

</body>
</html>

If I remove the doctype line div and td work as I would expect i.e. no margin appears under the image.

harinezumi
  • 11
  • 1
  • Read this first: http://stackoverflow.com/questions/414891/whats-up-doctype – Liam Apr 11 '13 at 14:44
  • 1
    btw, `align: center;` is not valid anymore. – dezman Apr 11 '13 at 14:44
  • There is probably some user-agent (browser) styles that are being applied to your `tr` or `table` that you need to override, check out inspect element. – dezman Apr 11 '13 at 14:46
  • possible duplicate of [White space at bottom of anchor tag](http://stackoverflow.com/questions/3197601/white-space-at-bottom-of-anchor-tag) – Quentin Apr 11 '13 at 14:53

2 Answers2

0

Solution

/* place in your css or between <style> */
img {
   vertical-align: top;   
}

Why is this?

Once you put text next to the image you will see the problem. The lines are getting more spacing because of the leters y g j. Thats why you have the space on the image.

In this example you see what I mean

http://jsfiddle.net/UrxmN/2/

S.Visser
  • 4,645
  • 1
  • 22
  • 43
  • Perfect! This solved it. I have not been doing a lot of css and I would have never thought that the space is there for letters that are not there. – harinezumi Apr 11 '13 at 16:27
0

I had an issue where page was showing padding in bottom of page

img { display:block ; }

writing above in css file solved my problem. Hope this will help others

Dashrath
  • 2,141
  • 1
  • 28
  • 33