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

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>

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?

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

Some are here.

1 Like

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 :).

1 Like