为什么inline-block 的margin-top会互相影响？

Question

两个inline-block元素包裹在一个div里面，调整其中一个inline-block的margin-top，另一个元素也会跟着向下移动。代码如下：

<div id="outer">
    <div id="inner1"></div>
    <div id="inner2"></div>
</div>

#outer {
    width: 200px;
    height: 50px;
    background: pink;
}
#inner1 {
    display: inline-block;
    width: 50px;
    height: 20px;
    background: red;
}
#inner2 {
    display: inline-block;
    width: 50px;
    height: 20px;
    background: yellow;
    margin-top: 20px;
}

效果如图所示：

为什么在一个inline-block上设定margin-top，会影响另一个inline-block呢？

Answer 1

默认情况inline（inline-block）元素垂直方向是基线对齐

vertical-align: baseline;

#inner2的margin撑开了inline-block元素的包含块，行框被撑开。(这个你可以把#outer的高设成auto来观察)
然后调节#inner1的vertical-align观察影响的因素

Answer 2

同意楼上，另，楼主可以看下行内元素的一些探究