The problem of minimum height of empty content in inline-block

example

</span>
  </div>

height is 6px in chrome and height is 4px in firefox. I have removed the height of the ghost node in front of span. Why does span still have height? Where did the height come from?

Css
Mar.04,2021

you can think of div as starting with a virtual x character fontsize is the browser's default fontsize, but this x is invisible, and then span's default vertical-algin is baseline. Then the bottom of the span will be aligned with the parent baseline, that is, with the baseline of x.
although the height of the div is 0, the bottom of the span will be aligned with the baseline of the virtual x, resulting in the parent div being stretched apart. One is 6px, and the other is that the 4px should have different baseline height due to the different default fonts of the browser. You can set the font-size of div to 0


I don't know what kind of effect you want, can you map it

Menu