为什么增加div的边际利润与div一起下降？

Question

我有一个简单但烦人的问题，当我增加“ sub” div的边距时。不知何故，除此之外按钮元素下降了。我不明白这是怎么回事，任何帮助将不胜感激。

#main {
  display: inline-block;
  text-align: right;
  width: 100%;
  border: 1px solid black;
}

#sub {
  display: inline-block;
  width: 400px;
  height: 40px;
  background-color: red;
  margin-top:20px;
}

a {
  display: inline-block;
  background-color: blue;
  padding: 24px;
  color: white;
  list-style-type: none;
  text-decoration: none;
}

<div id="main">
  <div id="sub"></div>
  <a href="">button</a>
</div>