11

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

Community
  • 1
  • 1
Yarin
  • 159,198
  • 144
  • 384
  • 498

2 Answers2

30

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.

Bazzz
  • 25,261
  • 11
  • 51
  • 67
  • 1
    @Bazzz- Good to know- but that's just too weird- going back to floats... – Yarin Mar 03 '11 at 18:03
  • @Yarin, haha fair enough. Well it does make some sense though that inline elements are on the same line. It looks weird because they are `div`, perhaps if you used `span` and put them all on one line it would look less weird. But in the end, if `float` works for you, then why not? :) – Bazzz Mar 03 '11 at 18:22
8

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.

Liam
  • 25,247
  • 27
  • 110
  • 174
RobW
  • 9,478
  • 4
  • 39
  • 40