Because there is a margin collapse in CSS, that is, border collapse or border overlap. For two parallel p blocks, the margin-bottom of the upper p and the margin-top of the lower p will collapse, that is, the maximum value of the upper and lower margins will be taken as the display value, so in this sense: CSS And browser designers hope that if we encounter the arrangement of two side-by-side content blocks during layout, it is best to only set one place above or below the margin of each block.
But for the situation where the parent block p contains the child block p, it will be explained according to another CSS convention, that is: the way to calculate the height of elements with block-level child elements, if the element does not have vertical borders and padding , then its height is the distance between the top and bottom border edges of its child elements. So for the code:
Click (here) to collapse or open
<p class="father"></p>
The height of father p is 0, because there is no content in it that can open p. If it becomes:
Click (here) to collapse or open
<p class="father">I am here.</p>
Then the height is the height of the text, because the text is supporting the p at this time. Having said that, a p and its sub-p pay special attention to the vertical border or filling. It is like a pot with a basin inside. Whether it can hold the basin inside mainly depends on the lid of the pot. The vertical border or filling The filling is the "lid". So there are at least two solutions:
Conclusion: To solve the problem of top margin collapse in the parent p, you need to set the following for the parent p: 1. Border, of course you can set the border to be transparent;
Click (here) to collapse or open
border:1px solid transparent or border-top:1px solid transparent
2. Add padding to the parent p, or at least add padding-top; In addition, it can also be solved through over-flow, writing to the parent p:
Because the margin-top of the child element affects the parent element The solutions are: 1. Add: overflow:hidden; 2. Add: border except none to the parent layer Attributes other than 3. Add: padding-top to the parent layer instead of margin-top.
Typical css problem. Margins are merged. If this happens, the questioner has already mentioned it. The solution is to add overflow to the parent container
Margin does not matter whether it is a child element or a parent element. As long as there is a margin-top, the parent element will inherit the child element and will be stretched. This can be solved by giving overflow:hidden to the parent element, or using padding in the child element. Fill, but subtract the corresponding fill value.
This problem occurs because the margin value of the child element is greater than the margin value of the parent element. The margins of block-level normal flows will overlap. The default height of block-level elements is from the highest outer border to the lowest outer border. If the margin of the parent element is greater than the margin value of the child element, the situation mentioned in the question will not occur. But! If the parent element has upper and lower padding or upper and lower margins, the height will change from margin-top to margin-bottom of the parent element.
So to solve this problem, just set upper and lower borders or padding to the parent
The margin-top of the parent container and the child container are merged. Solution: 1. Add to the parent layer: overflow:hidden; 2. Add to the parent layer: border attributes other than none 3. Add to the parent layer: padding-top instead The effect of margin-top (recommended).
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
The margin-top of the parent container and the child container are merged
http://www.w3school.com.cn/css/css_margin_collapsing.asp
Because there is a margin collapse in CSS, that is, border collapse or border overlap. For two parallel p blocks, the margin-bottom of the upper p and the margin-top of the lower p will collapse, that is, the maximum value of the upper and lower margins will be taken as the display value, so in this sense: CSS And browser designers hope that if we encounter the arrangement of two side-by-side content blocks during layout, it is best to only set one place above or below the margin of each block.
But for the situation where the parent block p contains the child block p, it will be explained according to another CSS convention, that is: the way to calculate the height of elements with block-level child elements, if the element does not have vertical borders and padding , then its height is the distance between the top and bottom border edges of its child elements. So for the code:
Click (here) to collapse or open
<p class="father"></p>
The height of father p is 0, because there is no content in it that can open p. If it becomes:
Click (here) to collapse or open
<p class="father">I am here.</p>
Then the height is the height of the text, because the text is supporting the p at this time.
Having said that, a p and its sub-p pay special attention to the vertical border or filling. It is like a pot with a basin inside. Whether it can hold the basin inside mainly depends on the lid of the pot. The vertical border or filling The filling is the "lid". So there are at least two solutions:
Conclusion:
To solve the problem of top margin collapse in the parent p, you need to set the following for the parent p:
1. Border, of course you can set the border to be transparent;
Click (here) to collapse or open
border:1px solid transparent
or
border-top:1px solid transparent
2. Add padding to the parent p, or at least add padding-top;
In addition, it can also be solved through over-flow, writing to the parent p:
Because the margin-top of the child element affects the parent element
The solutions are:
1. Add: overflow:hidden;
2. Add: border except none to the parent layer Attributes other than
3. Add: padding-top to the parent layer instead of margin-top.
Typical css problem.
Margins are merged. If this happens, the questioner has already mentioned it. The solution is to add overflow to the parent container
Margin does not matter whether it is a child element or a parent element. As long as there is a margin-top, the parent element will inherit the child element and will be stretched. This can be solved by giving overflow:hidden to the parent element, or using padding in the child element. Fill, but subtract the corresponding fill value.
Height issue with block-level normal flow:
This problem occurs because the margin value of the child element is greater than the margin value of the parent element. The margins of block-level normal flows will overlap.
The default height of block-level elements is from the highest outer border to the lowest outer border. If the margin of the parent element is greater than the margin value of the child element, the situation mentioned in the question will not occur.
But!
If the parent element has upper and lower padding or upper and lower margins, the height will change from margin-top to margin-bottom of the parent element.
So to solve this problem, just set upper and lower borders or padding to the parent
The margin-top of the parent container and the child container are merged.
Solution:
1. Add to the parent layer: overflow:hidden;
2. Add to the parent layer: border attributes other than none
3. Add to the parent layer: padding-top instead The effect of margin-top (recommended).
The margins of the child container are merged with the parent container.
1. Merge margins.
2. You can use padding instead of margin.