Spacing between borders, I can't remove it

Question

<div id="menuNav">
    <ul id="menuNav-ul">
        <li><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
    </ul>
</div>

I have a JSFiddle that I've made here:

http://jsfiddle.net/agzF5/

If you hover over the menu items that aren't the first of type you'll notice there is some strange margin appearing after where the border would be if it were set, I was wondering as to how I can remove that?

Matt

`background: lightgrey repeat-x;` really? – Roko C. Buljan Jan 30 '14 at 16:43 — Roko C. Buljan, Jan 30 '14 at 16:43

score 0 · Answer 1 · answered Jan 30 '14 at 16:46

0

add

html, body{margin:0;}

to the top, body alone should probably work as well..

answered Jan 30 '14 at 16:46

Tsasken

691
5
16

score 0 · Accepted Answer · answered Jan 30 '14 at 16:50

JSFiddle here

You had your list items as display:inline-block;

I've floated them left, added display:block; and changed some properties on the wrapping element. so it still contains the floated elements, see below.

#menuNav-ul {
    background: lightgrey repeat-x;
    list-style-type: none;
    padding: 0;
    margin: 0;
    border-bottom: 2px solid darkgrey;
    display:block;
    overflow:hidden;
}

#menuNav-ul li {
    display: block;
    border-right: 1px solid #bfbfbf;    
    margin: 0px;
    padding: 0px;
    float:left;
}

Awesome, thank you so much for your explanation, it works hundreds! — Matthew, Jan 30 '14 at 18:16

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

0

You're setting your LI elements to be display:inline-block which means they will have a inline whitespace space between them (usually ~4px).

3 solutions:

1. LIVE DEMO

add font-size:0; to the UL
reset the font size to px for the LI elements

2. don't add display:inline-block; but float:left; your LI elements

3. (not recommended) add a -4px margin-left to your LI elements

P.S: an additional suggestion is not to style (colors, borders etc) you LI elements. Treat them like simple positioned containers for your styled <a> elements.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 30 '14 at 16:52

Roko C. Buljan

164,703
32
260
278

Is it really a good idea to use floats instead of the inline-block function? – Matthew Jan 30 '14 at 18:15

score 0 · Answer 4 · answered Jan 30 '14 at 16:53

Others have answered with good solutions.

I wanted to leave this here in case it helps someone though.

The reason for this is that there is whitespace in your markup (totally fine), which inline-block renders as spaces.

If you are working with inline-block elements, you can to set the font-size of the parent to 0, then explicitly set the font-size of the child elements as a workaround for this.

score 0 · Answer 5 · answered Jan 30 '14 at 17:19

Well the simple solution is to add comment between your li items:

<div id="menuNav">
    <ul id="menuNav-ul">
        <li><a href="#">Home</a></li><!--
        --><li><a href="#">Page 1</a></li><!--
        --><li><a href="#">Page 2</a></li>
    </ul>
</div>

Check it in action: http://jsfiddle.net/agzF5/7/

Spacing between borders, I can't remove it

5 Answers5

3 solutions: