Why does an inline-block align to top if it has no content?

Question

I have the following simple setup:

HTML

text

tex         


        

Answer 1

Nothing is vertically top aligned, only content is missing. If you use  everything would be fine - look here. An empty inline tag has no baseline, so its bottom edge was used for alignment.

You have several solutions to align empty inline block tags:

• add   (and they won't be empty anymore)
• as BoltClock suggested, add an invisible character in :before
• change to vertical-align: bottom