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

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


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.


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>

Tags:

Css

Firefox