Unexpected gap between CSS header elements

Question

I'm currently redesigning a website and have run into an issue with some elements in the header. The header contains a logo, some text and a navigation bar. Between the bottom of the logo and the top of the navigation bar there is a relatively thick gap, shown in this screenshot:

I don't want the gap, I don't know where it's come from and I don't know how to get rid of it :(

I can reduce it down to a single pixel by setting the line-height property of the div containing the logo down to 0.0, but it seems hacky and still doesn't fix the issue.

The work-in-progress version can be viewed live here, if anyone with more HTML/CSS experience can identify any silly mistakes I've made.

Answer 1

The space comes from descenders which allow y and g characters to fully fit vertically. display:block; or vertical-align:bottom; should equally work.

Answer 2

img { display: block; }

The gap is there because images are inline elements aligned at the text baseline by default. It's where descenders would go if you had text with descenders in the same line.

Answer 3

add the following css class

.logo img
{
vertical-align:bottom;
}

Answer 4

The <a> containing the element should have display:block; position:relative and the image should have position:absolute. Works here.

Answer 5

If this is a browser-specific problem (that is, it happens in IE but not Firefox, for example), then it may be due to the way IE handles white space between elements.

I've come across issues like this where the only solution that worked was to remove all the white space between tags, so that the tags all run together on a single line, with not spaces or line breaks between them.

Having said that, I haven't personally seen an issue like this for a while so it may be IE6-specific (we stopped supporting IE6 some time ago).

Hope that helps.

Answer 6

It looks like you're getting some spacing from both the <div class="logo">, and from the <a href="#"> which wrap your logo. You can fix this using the display:block; or vertical-align:bottom; as mentioned above.

---

Recommendation: If you're not currently using it, you might want to look at installing the Firebug plugin for Firefox. It's a great tool for inspecting your page. You can highlight specific areas, and Firebug will show you which HTML elements and CSS classes are responsible for the layout.