List item margin

Question

I have the following CSS

ul {
    list-style-type: none;
}

li {
    padding: 0px 10px;
    padding-top: 11px;
    min-height: 38px;
    display: -moz-inline-stack;
    display: inline-block;
    font-size: 10px;
    text-transform: uppercase;
    color: #fff;
    vertical-align:middle;
    cursor:pointer;
    zoom: 1;
    *display: inline;
    _height: 38px;
}

li:hover {
    background: rgb(255, 255, 255);
    background: rgba(255, 255, 255, .18);
}

But when I hover over the list items, there appears to be a gap between each item of 6 pixels as shown in the image. I know it is 6 pixels because if I add margin-right: -6px; then the gap disappears. I don't want that gap to be there in the first place, I don't mind using margin-right: -6px; but I'd rather not have to use this hack.

My questions is as follow: Is this normal behavior for list items, or am I missing something somewhere?

Regards Crouz

Answer 1

This is the normal behavior of the inline-block. If you prefer using inline-block add font-size:0 to the parent ul.

ul {
  font-size:0;
}

DEMO

Answer 2

Its because you have used display:inline-block instead of float:left. THis is how inline-block behaves, another solution is to get rid of the whitespace in between the li tags in your HTML.

Answer 3

Without seeing your HTML, I can only assume that this issue is caused by a space (or a new line) between your inline-block li elements. The simplest way to remove this space would be to give your ul a font-size of 0, and set the li to have whatever your desired font-size is. This will effectively hide the space altogether.

ul {
    font-size: 0;
}

li {
    font-size: 14px;
}

Ideally though I'd suggest you use a table layout instead:

ul {
    display: table;
}

li {
    display: table-cell;
}

Answer 4

It's normal behaviour. See: display: inline-block extra margin

My preferred solution is to use float:left