The sub-element's margin-top will affect the parent element, and the margin-top will affect

The sub-element's margin-top will affect the parent element, and the margin-top will affect

--- Restore content start ---

When I was writing a project, I found that I wanted to add some margin between the parent and child elements, but the parent element produced the margin-top, So Baidu later found the cause.

In the css2.1 box model

In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin. all the adjacent two or more boxes of elements of the margin will be merged into a margin share. Adjacent Elements are defined as the same level or nested box elements, and they are separated by no non-empty content, Padding, or Border.

If the top margin of the child element of the parent element, margin-top, if it does not touch a valid border or padding, they will be shared before (the parent element will have margin-top ). Therefore, the above problems may occur. This also happens when the same level of Box elements meet the preceding conditions.

Solution:

1. Add a border-top or padding-top to the middle element in the parent element example to solve this problem.

2. Use floating or absolute positioning of sub-elements absolute

3. parent-level overflow: hidden (sharing means that both the parent and the child have the margin-top, but it is still in the upper part. overflow allows the child element to be hidden beyond the parent element, that is, mrgin-top, however, it is not recommended that the parent and child elements be separated)