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

add the following css class

.logo img
{
vertical-align:bottom;
}