Can't get rid of spaces between inline-block e

Question

This question already has an answer here:

• How do I remove the space between inline-block elements? 35 answers

Please see the following example: http://jsfiddle.net/Gv6w3/

As you can see, it's a simple example of menu items set to display:inline-block; All I'm trying to do is get the menu items flush against each other- I have margins set to 0px, but i can't get rid of the spacing between them? What is going on??

EDIT: Just noticed duplicates, my bad: How to remove the space between inline-block elements?, display: inline-block extra margin

Answer 1

Quick redux of the problem:

inline and inline-block tell the browser to display an element as if it was a word. Words have spaces between them. Your options for getting rid of these spaces are:

1. Remove the spaces from the markup
2. Use floats instead, which don't care about spaces in markup
3. Or find the width of a space and use margins or positioning to remove the spaces visually.

Solutions:

All css options, forevermore: http://css-tricks.com/fighting-the-space-between-inline-block-elements/

If you can't float, an em based negative margin gets my vote.

Answer 2

put the close tag of one and the open tag of the next element on the same line:

<div class="top-menu-item">
Item 2
</div><div class="top-menu-item">
Item 3</div>

Inline elements take the whitespace that is between them and this renders as 1 space. If you put the next element directly after the previous there will be no whitespace in between and the space will be gone.

Answer 3

There's another Stack Overflow thread on this problem here, but here's an alternate solution: http://jsfiddle.net/Gv6w3/3/

.top-menu-item {
  display:block;
  float:left;
  width:100px;
  margin:0px;

  background:#FFFF00;
  border:solid thin #00FF00;
}