The problem of 'content area' in CSS box model~high score, please give me some advice! _html/css_WEB-ITnose

I have a CSS textbook, and there is an example to explain the problem of overlapping margins:
Effect:

<div style="margin:10px; background:red;">    <p style="margin:20px; background:yellow;">aaaaaaa</p></div>

The explanation in the book is:
This situation occurs (margin overlay) is caused by the way the height of elements with block-level children is calculated.
If an element has no vertical borders or padding, its height is the distance between the top and bottom border edges of its containing child elements. Therefore, the top and bottom margins of the containing child element protrude beyond the edge of the container element. There's a simple solution: by adding a vertical border or padding, the margins no longer overlap, and the height of the element is the distance between the top and bottom margin edges of its containing child elements.

Questions:
1. Does the "height" in the red part refer to the height of the content area containing the element (div)?
2. If so, can it be understood that the reason for margin overlap is that the height of the content area containing the element is not enough?
If this is the case, then I add "height:200px;" to the css of the div element, because the height attribute is to give the height to the content area of ​​the element.
But the margins still overlap. Why?

The question is a bit convoluted, and because I don’t know much about the box model, the description of the problem is not very clear, so please read it carefully and answer it in a little more detail. It is not easy to write so much, thank you Everyone! :)

Reply to the discussion (solution)

1. It is the height of div, which is equal to the height of p
2. If you can’t understand it this way, use Borders or padding to limit the scope of child elements can eliminate overlap.

Your book’s explanation of content height and margin overlay is biased.
Margin overlay, w3c's description is:
For block-level elements (display:block), the upper and lower borders of unfloated vertically adjacent elements will be compressed.
An easy-to-understand example is: there are two elements, upper and lower. The lower border of the upper element is 5px, and the upper border of the lower element is 20px. Then the actual distance between the two elements is 20px (the larger of the two border values) value).

This is a situation where adjacent elements also include parent-child elements, just like in your example.
At this time, it actually has nothing to do with the height of the child element, but because the parent element has no padding or border, so the margin of the child element will go outside the content area of ​​the parent element.

I don’t know what book you are reading. Just give me this example. I suggest you read it in another book.

Learned, very good. . . .

1. The height of the red part is the height of the div content area, and it is also the height of the p content area. Because you have not set the height attribute of the div, by default the height of the div will be reduced to just enough to accommodate the child elements. ;
2. Even if you explicitly set the width of the div, if you do not set a vertical border or padding for the div or p, then even if the div has enough height to accommodate the entire height of the p (including margin etc.), margin overlap will still occur, because the upper margin of p coincides with the upper margin of div. Don’t ask why, the CSS2.1 standard stipulates this: without vertical borders or padding, block-level boxes under regular flow will have overlapping margins, brother boxes, parent-child boxes, and even themselves can have margins. coincide.
For this knowledge, you can go to W3school to learn it.

The internet at home was disconnected yesterday, thank you for your help! ! !