空和非空内联块的基线之间的差异 [英] Difference between baseline of empty and non-empty inline blocks

问题描述

div {
    display: inline-block;
    width: 100px;
    height: 100px;
    background: #aef;
    vertical-align: baseline;
}

base <div>×</div> <div></div> line

空的行内块与包含文本的行。这可以通过指定不同的 vertical-align 值来修复，但我不知道为什么会发生这种情况。你可以指向CSS规范的相关部分吗

The empty inline block is aligned differently from the one containing text. This can be fixed by specifying a different vertical-align value, but I wonder why this is happening. Can you point to a relevant part of CSS specification?

推荐答案

从 CSS2：线高计算

vertical-align：baseline - 将框的基线与父框的基线对齐。如果框没有基线，请将框底部的
与父项的基线对齐。

vertical-align: baseline — align the baseline of the box with the baseline of the parent box. If the box doesn't have a baseline, align the bottom of the box with the parent's baseline.

这篇关于空和非空内联块的基线之间的差异的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！