View Full Version : Extra blanks w/img in div box

02-13-2005, 02:04 AM
I'm wondering why there are a couple of pixel's worth of blank space under an image in a div container:

body {margin: 0px auto;}
#border_cont {
margin: 0px auto;
width: 500px;
padding: 0px;
border: 1px solid #ccc;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><link type="text/css" rel="stylesheet" href="css/no2.css"></head>
<div id="border_cont">
<img src="images/design/blue_grad.gif">

The border_cont works fine, but when inserting any image into it, I'm always left with a couple of pixels between the bottom of the image and the bottom of the border_cont border, even though both margin and padding is set to none.

I've also tried specifying height for the border_cont, but to no avail. Help?


02-13-2005, 02:09 AM
Maybe because you didn't end the div tag??

02-13-2005, 02:42 AM
Nope, noticed that, but no change when replacing </div> (don't know where that came from...) with </div>

02-13-2005, 02:52 AM
Your problem is that <img> is an inline tag.

In your css, you could apply.

#border_cont img {
display: block

Inline elements have a "baseline" of approx. 3px to allow for text and such...like when you use "p" and "j" then go under the baseline.

02-13-2005, 03:01 AM
That works good, thanks. I also found out that setting the height of the div container works in FF, but not in IE. Not sure which IE bug this is, but read something about a three-pixel jog issue with IE, maybe that's it.

Thanks again.

02-27-2005, 03:25 AM