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">


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.


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

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.