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
  • 173,523
  • 149
  • 402
  • 512

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
  • 26,427
  • 12
  • 52
  • 69
  • 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
  • 27,717
  • 28
  • 128
  • 190
RobW
  • 10,184
  • 4
  • 41
  • 40