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

前端 未结 2 707
你的背包
你的背包 2021-01-07 03:08

I have the following simple setup:

HTML



text

tex         


        
相关标签:
2条回答
  • 2021-01-07 03:49

    The baseline of an inline-block that has no inline children, including text, is its bottom margin edge (or simply bottom edge if it has no bottom margin). This baseline is then aligned with the baselines of the rest of the text. This is mentioned at the very end of section 10 of the spec.

    0 讨论(0)
  • 2021-01-07 03:56

    Nothing is vertically top aligned, only content is missing. If you use <a>&nbsp;</a>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 &nbsp; (and they won't be empty anymore)
    • as BoltClock suggested, add an invisible character in :before
    • change to vertical-align: bottom
    0 讨论(0)
自定义标题
段落格式
字体
字号
代码语言
提交回复
热议问题