Firefox 3 adds spacing to spans with display:inline-block

Question

In my test, I have 2 spans both set to display:inline-block with a border for visibility. Firefox renders space between each span. Even setting margin:0;padding:0; doesn't do anything to fix this. My expectation when setting the inline span element to display:inline-block is that the 2 spans render flush against each other, as if you floated 2 divs left or right. The only "fix" I have found is to add float:left or right to the spans, but that defeats my original purpose of trying not to use floats at all. Any ideas?

<style>
 span{
  border:2px solid #000;

  display:inline-block;

  padding:0;
  margin:0;
 }
</style>
<span>Test</span>
<span>Test2</span>

Answer 1

It's spacing them apart because you have space between them - the newline.

Answer 2

As a followup, I don't suppose there's a way to allow spans on multiple lines in the markup while not having them render the space?

Answer 3

I don't suppose there's a way to allow spans on multiple lines in the markup while not having them render the space?

Not exactly, but:

<span>...</span
><span>...</span>

Answer 4

Not loving this bug. Something you might want to consider though is setting the word-spacing on the container element to -1em. I've just ran into this bug myself so I'm not sure if it's practical but it will hide that space.

Answer 5

If you're rendering pure XHTML (and its highly likely you're not, even setting the doctype won't unless you serve the page to the user as XML, not HTML) then it would display as you are expecting.

However because of the above mentioned HTML / XHTML variances, it will be rendered as a single space.

Answer 6

You can also use comments to remove the empty space between the lines.

   <span>hou</span><!--
--><span>se#</span><!--
--><span>316</span><!-- outputs house#316 without spaces -->

No comments on the ugliness (pun intended), but sometimes this is an acceptable way to keep the markup lined up correctly while still displaying correctly.

Off topic but IMPORTANT: when using inline-block on spans, it is often very useful to turn on box-sizing (-moz-box-sizing: border-box; etc) which makes the borders & padding be measured from inside the elements. This is the only practical way to use percentages with inline-block spans, and can save many related headaches.

Answer 7

Ryan Mitchell's solution worked well for me. I ended up with something like this:

.container { word-spacing: -1em; }
.container * { word-spacing: normal; }