可用填充与元素之间的冲突

Question

因为当我拍摄此填充时：从div开始1px 0 0 0，它以段落在div内而下降；当boe被填充时：1px 0 0 0它返回法线和div内的段落间距提示。

代码：

<style>
  body {
    margin: 0;
    padding: 0;
  }
  
  div {
    height: -webkit-fill-available;
    background: #39f;
    width: 200px;
    padding: 1px 0 0 0;
  }
</style>
<div>
  <p>HELLO</p>
  <p>HI</p>
</div>