Why is the body being pushed down by a margin-top of a child-element, unless the body has a border?

Question

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

html {
    background-color: blue;
}

body {
    background-color: rgba(168, 202, 227);
    height: 100vh;
}

.app {
    margin-top: 3rem;
    border: 1px solid;
}

<div class="app">
    test
</div>

Why is margin-top on the app element pushing down the entire body?

Now, if you add a border to the body tag;

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

html {
    background-color: blue;
}

body {
    background-color: rgba(168, 202, 227);
    height: 100vh;
    border: 1px solid;
}

.app {
    margin-top: 3rem;
    border: 1px solid;
}

<div class="app">
    test
</div>

.. the body is not pushed down anymore. Why?