为什么h1元素的边距在容器外部起作用？

Question

* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

.container {
    background: yellow;
/*  padding: 0.1px 0; */
}

<div class="container">
    <h1> Heading </h1>
</div>

在上面的代码片段中，容器顶部有一些空白，并且该空白来自h1元素的边缘。

但是，如果我取消注释行/* padding: 0.1px 0; */的注释，则顶部没有空格，现在h1的边距开始在容器内部起作用。

* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

.container {
    background: yellow;
    padding: 0.1px 0; 
}

<div class="container">
    <h1> Heading </h1>
</div>

为什么会这样？有人可以解释一下这些情况下的保证金表现如何。