CSS grid-style navigation menu spacing

Question

I am trying to create a grid-style navigation menu, which I have done. Here is a jsFiddle of what I have so far. If you hover over the links you can see there is a 1 or 2px gap between the left and right hand columns, and I can't seem to get rid of it.

At the moment I have:

#nav {
    float:left;
    width:230px;
    display:inline;
    text-align:right;
}

#footer li {
    display:inline-block;
    text-align:left;
    line-height:32px;
    text-indent:10px;
    width:49%;
}

If I set the li {width:50%} the list doesn't fit into 2 columns, but when it is set to 49% I get the gap between list elements. There must be some padding or margin coming in somewhere but I can't see it. Any help would be great.

It's because `inline` elements respect the whitespace in the markup.. is this what you wanted.. I didn't change any CSS.. http://jsfiddle.net/JoshC/3XqZ3/10/ ? [See this answer](http://stackoverflow.com/questions/19038799/unexplainable-gap-between-divs/19038859#19038859) — Josh Crozier, Nov 15 '13 at 16:09
`display: inline-block` is your culprit. It's going to put a space between each block element. — Ally, Nov 15 '13 at 16:20

score 1 · Accepted Answer · answered Nov 15 '13 at 16:10

My favorite method of fixing this is to use a font-size: 0 in the parent and then restore the font size in the child. What happens is that a physical space in your html code (for example, pressing enter after an element) renders a physical space in the code, aka a space in between lis. The font-size: 0 renders that space as no physical width, thus allowing for two 50% lis.

#nav {
    font-size: 0;
}
#nav ul li {
    font-size: 15px;
}

Check it out: http://jsfiddle.net/3XqZ3/9/

Another option would be to use floats to get the elements right up next to each other. This also gets rid of the space in between.

#nav ul li {
    float: left;
}

A third option would be to make sure that there are no breaks in between elements in the html. Like:

<li>This is an li</li><li>This is another li</li>

Or:

<li>This is an li</li><!--
--><li>This is another li</li>

score 1 · Answer 2 · edited Jan 27 '14 at 01:07

1

That is white space caused by your inline-blocks. Because they are 'inline', your white space is taken into account.

There are a number of ways to overcome this. One is commenting out the whitespace:

<li class="green"><a href="#">Home</a></li><!--
--><li class="green"><a href="#">FAQs</a></li>

JSFiddle

Or you could use floating:

#footer li {
    float:left;
}

JSFiddle

edited Jan 27 '14 at 01:07

animuson

53,861
28
137
147

answered Nov 15 '13 at 16:12

George

36,413
9
66
103

score 0 · Answer 3 · answered Nov 15 '13 at 16:09

0

You should use float instead of display, like this:

#footer li {
    text-align:left;
    line-height:32px;
    text-indent:10px;
    width:49%;
    float: left;
}

Demo: http://jsfiddle.net/3XqZ3/11/

answered Nov 15 '13 at 16:09

Duver

500
4
12

CSS grid-style navigation menu spacing

3 Answers3