CODEWITHSUNDEEP
htmlcss
Manolo
Manolo

Reputation: 26370

Unexpected blank space between div tags

I wonder why I'm getting a blank space between two div tags. This is the HTML code:

<div id="header">
    <img id="background" src="http://farm3.staticflickr.com/2847/11154210265_a8854fe5c5_h.jpg" alt="background" />
</div>          
<div id="menu">
    Why the above blank space?
</div>

And the CSS:

* {
margin: 0px;
padding: 0px;
}
#background {
max-width:100%;
max-height: 550px;
}
#menu {
background: rgb(170,200,189);
}

You can see the behavior here: JSFIDDLE

Upvotes: 3

Views: 1225

Answers (2)

Olaf Dietsche
Olaf Dietsche

Reputation: 74028

The initial value for vertical-align is baseline. Therefore, img aligns itself at the baseline and leaves a small space below.

Besides the display: block @WillemLabu suggested, you have other options to fix this. If you don't have any text, you can set font-size on header

#header {
    font-size: 0;
}

JSFiddle

or adjust vertical-align appropriately, of course 

#background {
    vertical-align: bottom;
}

JSFiddle

Upvotes: 1

Labu
Labu

Reputation: 2582

It's the image tag that does that.

Make the image a block element, and it will fix the issue.

#background { display: block }

Upvotes: 6

Related Questions