Display table removes whitespace between inline elements in Chrome, but not in Firefox

[Mori]

Sample code

div {
  display: table;
  margin: 1em auto;
  background: lightBlue;
}

<div id="container">
  <label for="input">label</label>
  <input type="text" id="input">
  <span>span</span>
  <ol>
    <li>text</li>
    <li>text</li>
    <li>text</li>
  </ol>
</div>

https://codepen.io/mori79/pen/XWBZpNQ

This is how I centered the div: Chrome shrinks the container, and sequences of white space between the inline elements are collapsed, but Firefox doesn’t remove the whitespace between the label, input and span.

• Which behavior is correct?
• What’s a cross-browser solution?
• What’s the right approach to center the container?

[SamA74]

@Mori

What’s the right approach to center the container?

Using auto margins on the sides, as you are doing is a standard way to centre an element. Though there are other methods.

@Mori

What’s a cross-browser solution?

Some are here.

[PaulOB]

@Mori

Which behavior is correct?

As I understand it when you use display: table; white space nodes should be set to display:none as per the table algorithm because the browser constructs anonymous table elements to make the structure correct.

http://www.w3.org/TR/CSS2/tables.html#anonymous-boxes

It’s much the same issue with display: in-line-block creating white space nodes between elements.

In your case the simplest and more semantic solution is to wrap those three inline elements in a div and apply display:flex to the div. That should kill the white space nodes.

Note I haven’t tested the above in Firefox as I’m on a mobile at the moment :).