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

Your gap is a white space like you find in between words since both element are set as inline boxes. In your CSS you set as well somme padding to ul and a , they both are there. http://jsfiddle.net/37VZb/8/

.nav_bar, .nav{
    padding:0;
    display:inline-block;
}

To get rid of it:

1) do not indent your code and get closing and opening brackets of element touch each other

2) add a CSScomment in between to swallow that white-space

3) set font-size to 0 (0.01px for IE) to parent of these inline-boxes and reset it ot back to 1rem (and or px/pt) for img (alt) and nav_bar

negative margin or negative letter-spacing are not to be used, it is not reliable and not meant to care about this

Answer 2

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

<img src ="http://www.leapcms.com/images/100pixels1.gif"/><!--
--><div id ="nav_bar"> ...

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 <ul> 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.

Answer 3

is this what you mean? You can target the nav class on your ul and adjust the default margins that are being assigned

ul.nav{
  margin: 10px 0;
}

JSFIDDLE