Firefox 3 Adds Spacing to Spans with Display:Inline-Block

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

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

Firefox gap between inline-block letters in spans

Ok, after DEEP investigation, I have learned that Firefox applied Kernnig on the input field, but not on the separate letters in the spans while Chrome does not apply any kerning at all, thus, rendering a perfect text match. I see this is a Chrome bug then, not kerning by default is not so wise IMHO.

I've managed to remove the forced kerning in a "hacky" way, by adding a zero-width-space character \u200b after every character that is printed into the input field.

Update:
seems the kerning is still happening with the above trick, only less "kerned". this is not good.

Inline block adding extra space in firefox

I used following css fix exclusively for that one row

@-moz-document url-prefix() {
    #myRowID {margin-top:-5px;}
}

That solves my weird issue.

Spans with display:none is not showing the space bars in firefox

Confused by the other answer, to the best of my knowledge the solution here is the exact opposite. If you add contenteditable="false" to the span it will prevent spaces getting added to the hidden span.

<div id="parent">
  <div contenteditable="true" id="editor2">
    hello<span style="display: none" id="dummy_bkm" contenteditable="false"> </span>world
  </div>
</div>

How to remove the space between inline/inline-block elements?

Alternatively, you should now use flexbox to achieve many of the layouts that you may previously have used inline-block for: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Since this answer has become rather popular, I'm rewriting it significantly.

Let's not forget the actual question that was asked:

How to remove the space between inline-block elements? I was hoping
for a CSS solution that doesn't require the HTML source code to be
tampered with. Can this issue be solved with CSS alone?

It is possible to solve this problem with CSS alone, but there are no completely robust CSS fixes.

The solution I had in my initial answer was to add font-size: 0 to the parent element, and then declare a sensible font-size on the children.

http://jsfiddle.net/thirtydot/dGHFV/1361/

This works in recent versions of all modern browsers. It works in IE8. It does not work in Safari 5, but it does work in Safari 6. Safari 5 is nearly a dead browser (0.33%, August 2015).

Most of the possible issues with relative font sizes are not complicated to fix.

However, while this is a reasonable solution if you specifically need a CSS only fix, it's not what I recommend if you're free to change your HTML (as most of us are).

This is what I, as a reasonably experienced web developer, actually do to solve this problem:

<p>
    <span>Foo</span><span>Bar</span>
</p>

Yes, that's right. I remove the whitespace in the HTML between the inline-block elements.

It's easy. It's simple. It works everywhere. It's the pragmatic solution.

You do sometimes have to carefully consider where whitespace will come from. Will appending another element with JavaScript add whitespace? No, not if you do it properly.

Let's go on a magical journey of different ways to remove the whitespace, with some new HTML:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

You can do this, as I usually do:

 <ul>
     <li>Item 1</li><li>Item 2</li><li>Item 3</li>
 </ul>

http://jsfiddle.net/thirtydot/dGHFV/1362/

Or, this:

 <ul>
     <li>Item 1</li
     ><li>Item 2</li
     ><li>Item 3</li>
 </ul>

Or, use comments:

 <ul>
     <li>Item 1</li><!--
     --><li>Item 2</li><!--
     --><li>Item 3</li>
 </ul>

Or, if you are using using PHP or similar:

 <ul>
     <li>Item 1</li><?
     ?><li>Item 2</li><?
     ?><li>Item 3</li>
 </ul>

Or, you can even skip certain closing tags entirely (all browsers are fine with this):
```
 <ul>
     <li>Item 1
     <li>Item 2
     <li>Item 3
 </ul>
```

Now that I've gone and bored you to death with "one thousand different ways to remove whitespace, by thirtydot", hopefully you've forgotten all about font-size: 0.

:after span positioning differs between Chrome and Firefox

That's because of the element spacing of putting an input inside a span. You can fix this by commenting out the white space between the end of the input element and the closing span tag:

.inputlabel label{ display: block}.inputlabel input{ line-height:50px;}
.inputlabel-span {  position: relative;}.inputlabel-span input {  padding:0;  width:200px;   border: none;}.inputlabel-span::after {  position: absolute;  top:0;  content: "€";  right: 0px;}

<div class="inputlabel">  <label>    Some Label  </label>  <span class="inputlabel-span input-symbol-euro">    <input type="text"/><!----></span></div>
<p></p><div style="width:200px;background-color:red;">This div has 200px</div>

Inline-block span containing a single space is not displaying

To prevent whitespace collapsing you can use css white-space property:
https://developer.mozilla.org/en/docs/Web/CSS/white-space

Here is table of available values from link above:

Value       New lines       Spaces and tabs     Text wrapping
==============================================================
normal      Collapse        Collapse            Wrap
nowrap      Collapse        Collapse            No wrap
pre         Preserve        Preserve            No wrap
pre-wrap    Preserve        Preserve            Wrap
pre-line    Preserve        Collapse            Wrap

In your case suitable values are pre and pre-wrap:

.subtitle span {
  display: inline-block;
  transform: translate(100vw,0);
  transition: all .2s ease-in;
  white-space: pre;
}

Firefox 3 Adds Spacing to Spans with Display:Inline-Block