CSS margin overlap

Parent-child element margin overlap

Workaround:

1. Add a floating property to the child element, and the corresponding parent element adds the necessary clear float property;
2. Adds edge attributes to the parent element, such as padding, border;

Sibling element margin reverse overlap

When a sibling element margin is reversed, the distance between the elements is the larger of the two margin values.

Because the solution is less and the compatibility is poor, in the specific coding, should try to avoid the occurrence of this situation.

CSS margin overlap