With regard to the CSSS box model, there is a question about the adjacent outer margin (adjoining margin) that I do not understand, please consult everyone. Manual question mark?

the English document says this:

Note. Adjoining margins can be generated by elements that are not related as siblings or ancestors.

Chinese documents are translated in this way:

Note that adjacent outer margins can also be generated from elements that do not have sibling or ancestral relationships

However, apart from the elements of Brotherhood and ancestry, I really can"t think of anything else. Is it the case that the top and bottom margins of an element are adjacent?

Css
Jun.12,2021
Isn't the article followed by a list of situations?
https://www.w3.org/TR/CSS2/bo.

clipboard.png

Welcome to my Wechat official account: Front end Guide
Outer margin overlap is margin-collapse. The outer margins of two adjacent boxes (either brotherly or ancestral) can be combined into a separate outer margin. This way of merging the outer margin is called folding, and the combined outer margin is called the folding outer margin

.

the result of folding follows the following calculation rules:

when two adjacent outer margins are positive, the folding result is the larger value between them
when both adjacent outer margins are negative, the folding result is the larger absolute value of both
when the two outer margins are positive and negative, the folding result is the sum of the two.

how to avoid margin folding (how to eliminate it)

margin of floating elements, inline-block elements, absolute positioning elements will not be folded with margin of other elements in the vertical direction (note that this refers to adjacent elements up and down)

creates the element of the block-level formatting context without margin folding with its child elements (note that the element that created the BFC and its child elements will not collapse.

We all know that the triggers of BFC are float (except none), overflow (except visible), display (table-cell/table-caption/inline-block) and position (except static/relative). Obviously, you can see that the factor that does not collapse adjacent elements is a subset of the trigger BFC factor, that is, if I set overflow:hidden, for the upper and lower adjacent elements, although BFC, is triggered, the upper and lower margin of the upper and lower elements will still collapse.

In fact, this problem does not have much to do with BFC. I hope you do not abuse BFC, to know that BFC is not omnipotent. The original purpose of creating BFC is only to allow the element itself (including its child elements) to correctly calculate its own width and height.

zoom, which was originally supported by IE browsers, is now supported only by the latest webkit core browsers. But successfully triggering hasLayout, only in browsers below IE8 has no effect on non-IE browsers, so you still need to create BFC in the same way.
on how to solve this problem in the end, my advice is to try to use margin, in the same direction when writing, such as setting it to top or bottom, because sometimes you don't need to set float, inline-block or absolute for each element in practice.

Previous: Is HTML5 only suitable for mobile layout and typesetting?

Next: React Project need an appropriate loader to handle this file type

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu