空和非空内联块的基线之间的差异

Question

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

来自CSS2: Line height calculations

  

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