Bokse-model: CSS Marginfusede

Marginfusede betyder, når to lodrette marginer mødes, vil de danne en margin.

Højden på den fusede margin er lig med den største af de to fusionerede marginers højder.

Marginfusede

Marginfusede (叠加) er en ret simpel koncept. Men i praksis kan det forårsage meget forvirring, når der planlægges websider.

Forenklet sagt, marginfusede betyder, når to lodrette marginer mødes, vil de danne en margin. Højden på den fusede margin er lig med den største af de to fusionerede marginers højder.

Når et element vises over et andet element, vil den nederste margin af det første element og den øverste margin af det andet element blive fusioneret. Se billedet nedenfor:

CSS margin collapse example 1

Prøv det selv

Når et element indeholder et andet element (antag at der ikke er indre margin eller kant, der adskiller marginerne), vil deres øverste og/eller nederste marginer også blive fusioneret. Se billedet nedenfor:

CSS margin collapse example 2

Prøv det selv

Selvom det ser lidt underligt ud, kan marginer endda fusionere med sig selv.

Antag, at der er en tom element, der har margin, men ingen kant eller fyldning. I dette tilfælde vil den øverste margin og den nederste margin mødes, og de vil blive fusioneret:

CSS margin collapse example 3

If this margin encounters the margin of another element, it will also cause a collapse:

CSS margin collapse example 4

This is why a series of paragraph elements occupy very little space, because all their margins are merged together to form a small margin.

At first glance, margin collapse may seem a bit strange, but in fact, it is meaningful. Taking a typical text page composed of several paragraphs as an example, the space above the first paragraph is equal to the paragraph's top margin. If there is no margin collapse, the margins between subsequent paragraphs will be the sum of the adjacent top and bottom margins. This means that the space between paragraphs is twice the distance from the top of the page. If margin collapse occurs, the top and bottom margins between paragraphs are merged together, so the distances are consistent everywhere.

The practical significance of CSS margin collapse

Note:Only the vertical margins of block boxes in the normal document flow will cause margin collapse. The margins between inline boxes, floating boxes, or absolutely positioned elements will not collapse.