html - Ask about margin-top

Question

<p >
    <h1 style="margin-top:100px">aa</h1>
</p>

I have a question that I don’t understand.
In 1.html, p wraps an h1, and h1 has a margin-top. Why does the margin-top of h1 burst outside of p instead of implementing margins inside p?
2. How to implement it in p. Thank you.

Code Demo
Link Description

Answer 1

This question has been asked many times, let me give you a reference
MDN-collapsing margins
Collapsing margins

Answer 2

According to jasonintju’s answer, I will sort it out:
Because the margin-top of my child element is larger than the parent element, I will use the margin-top of the child element directly

Block-level parent element and its first/last child element
If the block-level parent element does not have the four attributes of top border, top padding, inline content, and clear float (for top border and top padding, you can also Say, when the top margin and top padding width are 0), then the top margin of this block-level element and its first child element can be said to be "close to each other." At this time, the upper margins of the block-level parent element and its first child element will merge. In other words, the margins displayed by the parent element at this time will directly become the parent element and its first child element. The larger of the margin-top of the child element.
Similarly, if the margin-bottom of the block-level parent element and the margin-bottom of its last child element are not separated by the border, padding, inline content, height, min-height, and max-height of the parent element, then Margin merging will occur.

Quote: https://developer.mozilla.org...

Answer 3

Just separate p and h1 and set padding or border on p