Weird Margin Behavior

[obtuse loom]

Hello,

While working on my first solo project, I encountered an unusual behavior. The text margin within the container is experiencing overflow, meaning it extends beyond the container's boundaries. Despite explicitly defining the container's height, this problem persists. Surprisingly, adding a border to the container resolves the issue, and the margin no longer overflows.

To illustrate the problem, I have created a new scrim consisting of a div container and an h1 tag within it.
https://scrimba.com/scrim/c9g7ZPhD

[coarse flax]

This is called a "collapsing margin"...

The problem is that your <h1> tag has a default margin.

That margin will "interact" with anything else on the page (i.e. the margin is between two elements). In your first case there's nothing for the h1 to "interact" with so it uses the top of the page, the containing div similarly is using the top of the page (the margin's "collapse") - effectively the div and the h1 "share" a margin.

In your second case you've introduced the border which DOES give something for the h1 to interact with and so the margin is respected with relation to the border of the container.

To see this in action go back to your first case (where it's not working) and temporarily insert something above the h1 but still inside the div (a single letter is fine) and voila, the margin is respected again because h1 will respect the margin between itself and the letter and the h1 and div no longer share the margin.