View Full Version : Unexpected gap between CSS header elements

09-07-2010, 04:57 PM
Moderators: Please let me know if you have any issues with this post; I am not trying to advertise for the business whose site it is (they only serve customers within a few miles of their office, so they have nothing to gain through this post).

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 (http://sandbox.woodstockdesigns.co.uk/), if anyone with more HTML/CSS experience can identify any silly mistakes I've made and give me some hints, pointers or solutions :)
Thanks in advance.


I removed it by adding the following classes:

.logo img

.openingtimes p {

09-07-2010, 05:18 PM
Most of the gap can be fixed by setting your image to display:block. Without this the browser is allowing space "below the line" for the tails of g,y etc.

This still leaves about a one pixel line which is caused by the .opening times div extending a little further down than it needs to. You can fix this by removing the bottom margin on the <p> in that div via:

.openingtimes p{margin-bottom:0}

The latter is easy to spot in Firebug (http://getfirebug.com).