Firefox/Chrome empty label content position glitch/bug [duplicate]
Firefox/Chrome empty label content position glitch/bug [duplicate]
This question already has an answer here:
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.
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
1 Answer
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:
vertical-align
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>
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 2 at 21:35
@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 2 at 22:07
overflow: auto;
You got that right @TemaniAfif
– VXp
Sep 2 at 22:19
Thank you. I was stunned by this one.
– user619271
Sep 2 at 21:24