Top and bottom margin overlapping transfer problem

I found that obsessive-compulsive disorder is really a serious illness of mine. . . All situations must be tested every time. . . BUT!!!!!!!!!The sad thing is, I can't remember so many situations. . . I still have to keep making and troubleshooting errors when writing code~ I can’t stand myself anymore! But let’s summarize this part here~

The following parts should cover all situations of margin overlap problems:

1. Two The margins above and below ordinary elements will be merged into one margin, whichever one will be elected!

Two floating elements will not have the problem of margin transfer. The margin-bottom of the upper element and the margin-top of the lower element are still added together as the margin value between the two.

2. If two elements are included in the relationship, the upper and lower margin values ​​​​of the parent element and the child element will also be merged (recommended learning: CSS video tutorial)

When the parent element does not add a border and does not set the width and height, that is, the parent does not trigger haslayout	Under IE6, 7 and standard browsers, it will A margin transfer problem occurs when the height of the child element and the parent element are the same (the top of the child element will be in a straight line with the top of the parent element, and the bottom will be in a straight line with the bottom of the parent element), while the parent element selects the larger one between the two. The value is used as the margin-top value and margin-bottom value of the parent element! ! ! The margin-left and margin-right values ​​​​of the child elements still exist
When the parent element does not add a border, but sets the width or height or zoom: 1; that is, when the parent adds an attribute that can trigger haslayout	Under standard browsers, margin transfer will occur, but under IE6 and 7, margin transfer will not occur (that is, the margin of the child element is relative For the parent element, it will not be passed to the parent)
When the parent adds a border and the parent does not trigger haslayout	Standard Under the browser, margin will not be passed. Under IE6 and 7, the margin of the child element disappears completely!
When the parent adds a border and the parent triggers haslayout (that is, adds width or height or zoom: 1),	IE6, 7 and standard Under the browser, margin delivery will not occur! ! !

For IE6 and 7:

That is, as long as haslayout is triggered, it does not matter whether a border is added to the parent element, or whether margin is passed in standard browsers. Margin transfer will not occur under IE6 and 7! ! !

For standard browsers:

Only adding a border can avoid margin passing! ! !

Add a border to the parent element, then there will be a dividing line in the margin between the child element and the parent element, and no merging will occur at this time! If you add a border to a child element, the margin values ​​of the two are still not separated, so overlap will still occur!

If the parent element here contains multiple block sub-elements, then the upper and lower margins of each sub-element overlap, and the larger margin between the two is selected as the margin between the two, the first sub-element The top of the element overlaps with the parent element (the white area above the left picture is the white area from the top of the browser), and the bottom of the last child element overlaps with the parent element. The display effects of IE6, 7 and standard browsers are as shown on the left.

At this time, if the two block elements are floating elements, then there will be no margin transfer between the child element and the parent element. At this time, the upper and lower margin values ​​​​are between the two. The respective margin values ​​are added together! The standard browser displays as shown in the picture below, and IE6 displays as shown on the right of the picture below. But why is there a difference in the display?

Because, God! One wave comes after another! Block elements, horizontal margins and floats have caused a new compatibility issue in IE6 - the double margin bug (note that IE7 does not have a double margin bug!!!!)

Therefore

In practice, you must first add the attribute that triggers haslyout to the parent element! This article ensures that margin transfer problems and margin value disappearance problems do not occur under IE6 and 7;

Then, consider that under standard browsers, adding floats to child elements can solve the problem of no border. There is a margin transfer problem that occurs when adding a float, but adding a float at this time will cause a double-margin bug in IE6. Therefore, in practice, we try to replace the margin of the floating block element with padding. If it cannot be changed, add display: inline to the element. ;!

3. There is no margin value between the top and bottom of the two Divs (A, B), but there is a sub-element in A that has margin. At this time, the margin value of the sub-element will be passed to the two. Will fill the margin between the two elements A and B, only in the vertical direction! ! !

For this question, that's about it. It's actually very simple. I just listed all the situations. In fact, the summary is the content of the summary above.

I feel that this margin transfer and overlap is because there is no border between the two margin values ​​or padding separates the margin area! ! ! !

The above is the detailed content of Top and bottom margin overlapping transfer problem. For more information, please follow other related articles on the PHP Chinese website!