div container larger than image inside [duplicate]

Question

once again was hoping you could help me out.

I am a novice at css and trying to build something simple, but even simple is turning out to be really difficult :(. been at this problem for like an hour now.

any ways the problem I have right now is that I have a div that has an image inside, but the div has like 5px space extra at the bottom which I just cannot figure out how to remove.

basically this is what I have

as you can see there is a little "white" space below the image.

this is what I want (edited using paint)

basically I have a gray background for body, with a wrapper inside with a width of 70%,

inside the wrapper there is a menu (the little red thing is part of that menu), then there is a div (id=container) whos background is white, width is 142.8571%, and left is 15% so that it covers the whole page. then inside this div is the image.

so basically the problematic div is the div with ID container.

this is my code for the relevent part

HTML:

<div id="container">

    <img id="banner-img" src="img/banner.jpg">

</div>

CSS:

#container{

    background-color: white;

    padding-bottom:0px;
    margin-bottom: 0px;
    border-bottom-width: 0px;


    width: 142.8571%;

    position:  relative;
    left: -21.428571%;




}

#banner-img{
    position: relative;
    margin: 0px auto 0px auto;
    width: 70%;
    left: 15%;
    height: auto;
    padding: 0px;
    border: 0px;
    position: relative;

}

Answer 1

now used to this

img, #banner-img{
vertical-align: top;
}

Answer 2

Another solution would we to set the image to block:

img { display: block; }

Answer 3

The blank space at the bottom is probably down to the CR/LF between your image tag and end div tag. Some browsers don't like this. There's probably a CSS workaround, but I tend to remove the CR/LF's and put it all on one line, like this:

<div id="container"><img id="banner-img" src="img/banner.jpg"></div>