Firefox/Chrome empty label content position glitch/bug

Question

How to put these red boxes in line? One in the middle jumps down for no reason.

nav label {
  width: 50px;
  height: 50px;
  display: inline-block;
  background-color: red;
}

<nav>
  <label></label>
  <label>2</label>
  <label></label>
</nav>

I need to preserve empty labels empty.

VXp · Accepted Answer · 2018-09-02T21:58:11.483

1

You need to set the vertical-align and change its default value of baseline, which is the reason behind the unwanted result, to e.g. top:

nav label {
  width: 50px;
  height: 50px;
  display: inline-block;
  vertical-align: top; /* or "middle", "bottom" */
  background-color: red;
}

<nav>
  <label></label>
  <label>2</label>
  <label></label>
</nav>

edited Sep 02 '18 at 21:58

answered Sep 02 '18 at 21:15

VXp

Thank you. I was stunned by this one. – user619271 Sep 02 '18 at 21:24
1

No problem, glad to help. Otherwise this isn't a bug, it's just a default behavior or effect of the baseline, where the nonempty label is aligned with other siblings by the bottom line of its content, which is called the baseline. Or in other words, words lay on it. – VXp Sep 02 '18 at 21:35
1

@user619271 another magic trick is to add `overflow: auto;` to the middle element which will make the baseline be the bottom (like the others) and no need to adjust vertical-align – Temani Afif Sep 02 '18 at 22:07
1

You got that right @TemaniAfif – VXp Sep 02 '18 at 22:19

1 Answers1