为什么填充会影响相邻元素的位置？

Question

在this code sample上，

当我删除I​​D为#a的元素上的填充时，蓝色元素向上移动，反之亦然。

但是当我检查Chrome开发工具中的边距和填充时，看起来它们根本不会相互影响！

为什么红色元素的填充会影响蓝色元素的垂直定位？

我了解为什么它会影响水平方向，但是垂直方向的变化使我感到困惑！

我已经研究了CSS盒子模型，但是并没有帮助。

* {
  font-size: 20px;
}

#a {
  background-color: red;
  display: inline-block;
  box-sizing: border-box;
  height: 100px;
  width: 150px;
  padding: 30px;
}

#b {
  background-color: blue;
  display: inline-block;
}

<div id="a">
  CONTENT
</div>

<div id='b'>
  CONTENT
</div>

我希望更改红色el的填充完全不会影响蓝色el的位置！