Why is there a gap between image and navigation bar

Question

Hi I\'m having some trouble removing a small gap between an image and my navigation bar. I\'ve honestly tried just about everything i can think of. Setting inline-blocks on my u

Answer 1

That's because of a space character between inline(-block) elements. This could be fixed by commenting that space out this way:

 ...

JSFiddle Demo.

Similar topic on SO:

• How to remove the space between inline-block elements?

And a good reference:

• http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Update

The remaining space belongs to the user agent applied style on the

element.

Web browsers usually apply some padding on the list elements. To remove that set padding: 0; as follows:

ul.nav { padding : 0; }

Here is the Updated Fiddle.