How CSS implements margin consolidation

This article mainly describes how CSS to achieve the integration of the margin, small series feel very good, and now share to everyone, but also to make a reference. Let's take a look at it with a little knitting.

Margin merging means that when two vertical margins meet , they form an outer margin.
The height of the merged margin is equal to the greater of the two of the height in which the merged margins occur.

Case of margin merger

Scenario 1

When an element appears above another element, the bottom margin of the first element merges with the top margin of the second element.

Scenario 2

When an element is contained within another element (assuming that no padding or borders are separated from the margin), their upper and/or lower margins also merge.

Case

Scenario 3

Margins can also be merged with themselves.
Suppose there is an empty element that has an outer margin, but no border or padding . In this case, the top margin and the bottom margin are met together, and they merge.

If the margin encounters the margin of another element, it also merges:

Eliminate margin merges

note: only does not take place outside the merge. is not merged.

<! DOCTYPE html>
. However, it is also important to note that , which is visible from the border of the parent element and the child element. 

<! DOCTYPE html>
to eliminate the situation after the margin merge:



Related recommendations:

The problem of CSS margin merging and its solving measures

CSS Basic Learning: The box model complements the margin merge

CSS margin Merge (how to do not merge)