How/why does an inner element have its margins extend into a containing element?

Question

Some very simple html:

<header class="my-header">
    <div class="no-margins">
        <p>Nicolay Copy</p>
    </div>
</header>

And css:

.my-header {
    position: sticky;
    top: 0;
    margin: 0 0 0 0;
    background-color: white;
    z-index: 1;
}

.no-margins {
    margin: 0 0 0 0;
}

Here's the F12 computed for the containing <div>

And here's the F12 computed for the contained <p>.

Shouldn't the margins for <p> be inside the <div>? Obviously they aren't, but why?

Answer 1

According to the docs:

If there is no border, padding, inline part, block formatting context created, or clearance to separate the margin-top of a block from the margin-top of one or more of its descendant blocks; or no border, padding, inline content, height, or min-height to separate the margin-bottom of a block from the margin-bottom of one or more of its descendant blocks, then those margins collapse. The collapsed margin ends up outside the parent.

– Mastering margin collapsing | MDN Web Docs

Since there is nothing between .no-margins and p, its first and last child, their margin-top and margin-bottom collapse. .no-margin's margins are all 0, so their margin-top and margin-bottom, as a whole, ultimately take p's as the value.

For solutions, see How to disable margin-collapsing?.