为什么两个div之间有空隙？

Question

我将框大小设置为边界框，边距设置为零，但是这两个div之间仍然有一个小的空白。仅在Codepen上尝试过。这可能是问题吗？请帮忙。

* {
  margin : 0px;
  box-sizing: border-box;
  border : 0px;
  padding : 0px;
}

#main {
  text-align : center;
  line-height : 100px;
  height : 100px;
  width : 500px;
  background-color : red;
  
}

#ls {
  text-align : center;
  line-height : 100px;
  height : 100px;
  width : 300px;
  background-color : navy;
  display : inline-block;
  color : white;
  
}

<h1 id="main">Main</h1>
<p id="ls">LS</p>
<p id="rs">RS</p>