将行高添加到一个DIV会替换另一个DIV

Question

我有两个DIV并排放置以下代码。

body {
    margin: 0;
}

#foo {
    background: orange;
    width: 50%;
    height: 100px;
    display: inline-block;
}

#bar {
    background: lightblue;
    width: 50%;
    height: 100px;
    display: inline-block;
}

<div id="foo">
    <span>Foo</span>
</div><div id="bar">
    <span>Bar</span>
</div>

这很好用。现在，如果我仅在第一个DIV（橙色）中垂直居中对齐文本，则两个DIV不再相互对齐。这是代码。

body {
    margin: 0;
}

#foo {
    background: orange;
    width: 50%;
    height: 100px;
    display: inline-block;
    line-height: 100px;
}

#bar {
    background: lightblue;
    width: 50%;
    height: 100px;
    display: inline-block;
}

<div id="foo">
    <span>Foo</span>
</div><div id="bar">
    <span>Bar</span>
</div>

只是将line-height属性添加到第一个DIV导致第二个DIV向下移动。似乎两个DIV中文本的基线对齐在一起，结果第二个DIV向下移动。我知道可以通过为第二个DIV设置vertical-align: top或者为第二个DIV设置line-height属性来修复它。

但是在这个问题中，我想知道为什么第二个DIV会降低第二个代码示例。如果您可以引用CSS标准的相关部分来解释这一点，那将会很有帮助。