css - 空和非空内联 block 基线之间的区别

Question

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

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

空内联 block 的对齐方式与包含文本的 block 不同。这可以通过指定不同的 vertical-align 值来解决，但我想知道为什么会这样。你能指出 CSS 规范的相关部分吗？

Answer 1

来自 CSS2: Line height calculations

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.