CSS - Why cannot div wrap h1 element?

Question

<div id="title">
    <h1>
        Title
    </h1>
</div>

I know there is some default margin along with h1 tag. When I check it out with chrome dev tools, I find that the div part is smaller than h1 part(the highlighted zone of h1 is larger than div). It seems div does not include the margin of h1, can anyone tell me why ?

Answer 1

From the 2.1 Spec:

"The top margin of an in-flow block element collapses with its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance."

---

Also:

• Floated elements' margins never collapse, not even with in-flow block descendants
• Inline-block elements' margins never collapse, not even with in-flow block descendants
• Block containers with an overflow property value other than visible do not have collapsing margins, not even with in-flow block descendants
• The margins of absolutely/fixed positioned elements do not collapse, not even with in-flow descendants
• The margins of adjacent flex items don't collapse
• Horizontal margins never collapse

Regarding negative margin collapsing, the 2.1 Spec states:

"In the case of negative margins, the maximum of the absolute values of the negative adjoining margins is deducted from the maximum of the positive adjoining margins. If there are no positive margins, the maximum of the absolute values of the adjoining margins is deducted from zero."