0

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 ul and li level, and using text-align: left don't seem to be moving the hyperlinks to the left-most side of the div, and from there I'm not to sure what should be done. There is a padding, but it shouldn't be causing that much of a gap.

Here is the html code:

        <div id = "header">
        <img src ="img.png"/>   
           <div id ="nav_bar">
            <ul class="nav">
                <li class= "nav"><a href="#">Home</a></li>
                <li class= "nav"><a href="#">Our Products</a></li>
                <li class= "nav"><a href="#">Categories</a></li>
                <li class= "nav"><a href="#">About Us</a></li>
                <li class= "nav"><a href="#">Contact Us</a></li>
            </ul>
           </div>
        </div>

Here's a jfiddle describing what I'm talking about. http://jsfiddle.net/37VZb/1/

To clarify the gap I'm talking about is between the right of the image and the left most nav bar element. enter image description here

Community
  • 1
  • 1
Bird
  • 143
  • 1
  • 4
  • 18

3 Answers3

4

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:

And a good reference:

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.

Community
  • 1
  • 1
Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
  • *Well*, Using `inline-block`s has its own pros and cons. – Hashem Qolami Jan 22 '14 at 18:11
  • That seems to help a bit, but there is still a 60px~ gap between the picture and the nav bar. The padding is another 20px, so where would the rest be coming from? – Bird Jan 22 '14 at 18:17
0

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

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
0

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

jmore009
  • 12,863
  • 1
  • 19
  • 34