Detailed description of the margin outer margin merge and the margin outer margin merge

Detailed description of the margin outer margin merge and the margin outer margin merge

Detailed description of margin outer margin merge:

The phenomenon of outer margin merging is very common in the web page layout. We must take this into account, so that we can plan ahead. Otherwise, it may affect work efficiency and even seriously impede the project progress. There have been a large number of related articles on the network. Next we will use examples to summarize the network teaching materials and introduce the phenomenon of outer margin merging.

Concept:

Two or more adjacent margins are merged in the vertical direction into one. This is called the combination of margins.

This phenomenon does not exist in the horizontal direction.

Conditions for combining outer margins:

1. No non-empty content, padding, and border and clear are separated between adjacent margins.

2. objects are all in the Document Stream, that is, elements whose non-floating and position attribute values are not absolute and fixed.

Merging can exist between sibling objects or between parent and child objects. Next we will introduce them separately:

1. Merge outer margins between sibling objects:

Example:

<! DOCTYPE html> 
The above Code shows that the top margin of the bottom element and the bottom margin of the top element are merged, that is, the vertical distance between the two elements is 20px, rather than 20px + 10px = 30px. We can see that the value of the two margins is greater. Let's take a look at a code example:
<! DOCTYPE html> 
If the outer margin has positive and negative values, add the maximum integrity and the minimum negative values to obtain the combined values of the two margins. Let's look at an example code:
<! DOCTYPE html> 
If the object's outer margin is negative, take the smallest negative number as the outer margin.
2. Parent-Child margin merge:
Let's take a look at a code example:
<! DOCTYPE html> 
In the above Code, the margin and the parallel phenomenon occur. At this time, the margin of the child element does not act on the parent element, but on the object outside the parent element. Parent-Child outer margin merge not only meets the two outer margin merge entries introduced at the beginning of the article, but also does not have context layout attributes in the parent element, for example, cannot have overflow (except visible) or display: inline-block.
Note:
The example of the margin merge mentioned above only involves two objects, because this is the most common situation in actual application. However, the margin merge phenomenon is not limited to only between two objects, as long as the outer margin merging conditions are met, the outer margin merging can occur. The code example is as follows:
<! DOCTYPE html> 
In the above Code, the three margins are merged. Note that the calculated outer margin value is not calculated by layer, but by following the principles described above, the preceding merge method selects the smallest sum from the negative value and the largest sum from the positive value, that is,-50px + 150px = 100px.
There is also an extreme way of merging: the outer margin of the element itself will also be merged. The code example is as follows:
<! DOCTYPE html> 
The running result of the above Code shows that the outer margin of the Code is merged, but the div cannot have the height and content, because the upper and lower margins are not adjacent, the outer margin merging condition is not met.
Original address: http://www.51texiao.cn/div_cssjiaocheng/2015/0501/510.html