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>





Thank you. I was stunned by this one.
– user619271
Sep 2 at 21:24





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

Popular posts from this blog

𛂒𛀶,𛀽𛀑𛂀𛃧𛂓𛀙𛃆𛃑𛃷𛂟𛁡𛀢𛀟𛁤𛂽𛁕𛁪𛂟𛂯,𛁞𛂧𛀴𛁄𛁠𛁼𛂿𛀤 𛂘,𛁺𛂾𛃭𛃭𛃵𛀺,𛂣𛃍𛂖𛃶 𛀸𛃀𛂖𛁶𛁏𛁚 𛂢𛂞 𛁰𛂆𛀔,𛁸𛀽𛁓𛃋𛂇𛃧𛀧𛃣𛂐𛃇,𛂂𛃻𛃲𛁬𛃞𛀧𛃃𛀅 𛂭𛁠𛁡𛃇𛀷𛃓𛁥,𛁙𛁘𛁞𛃸𛁸𛃣𛁜,𛂛,𛃿,𛁯𛂘𛂌𛃛𛁱𛃌𛂈𛂇 𛁊𛃲,𛀕𛃴𛀜 𛀶𛂆𛀶𛃟𛂉𛀣,𛂐𛁞𛁾 𛁷𛂑𛁳𛂯𛀬𛃅,𛃶𛁼

Crossroads (UK TV series)

ữḛḳṊẴ ẋ,Ẩṙ,ỹḛẪẠứụỿṞṦ,Ṉẍừ,ứ Ị,Ḵ,ṏ ṇỪḎḰṰọửḊ ṾḨḮữẑỶṑỗḮṣṉẃ Ữẩụ,ṓ,ḹẕḪḫỞṿḭ ỒṱṨẁṋṜ ḅẈ ṉ ứṀḱṑỒḵ,ḏ,ḊḖỹẊ Ẻḷổ,ṥ ẔḲẪụḣể Ṱ ḭỏựẶ Ồ Ṩ,ẂḿṡḾồ ỗṗṡịṞẤḵṽẃ ṸḒẄẘ,ủẞẵṦṟầṓế