删除行高会导致文本显示在文本框之外

Question

问题1：为什么删除内部div中的行高会导致文本从内部移除？

问题2：如何让文本也在小方框的底部对齐？我需要第三个div来完成这个吗？

＆＃13;

＆＃13;

#parent {
  line-height: 200px;
  width: 300px;
  height: 200px;
  border: solid black 1px;
  padding: 20px;
  
  
}

#parent div {
  
  display: inline-block;
  line-height: 40px; /* Removing this line causes text to move outside of div */
  width: 40px;
  height: 40px;
  border: solid black 1px;
  text-align: center;
  vertical-align: bottom;
  margin: 5px;
}

＆＃13;

<div id="parent">
  <div>
  A
  </div>
  <div>
  B
  </div>
  <div>
  C
  </div>
  <div>
  D
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;