Rutmodellen: CSS marginalslåsning

Marginalslåsning innebär att när två vertikala marginaler möts, bildas en marginal.

Höjden på den sammanslagna marginalen är lika med den största höjden av de marginaler som slås ihop.

Marginalslåsning

Marginalslåsning (stackning) är en relativt enkel koncept. Men, i praktiken kan det orsaka mycket förvirring när man lägger ut webbsidor.

För att säga det enkelt, innebär marginalslåsning att när två vertikala marginaler möts, bildas en marginal. Höjden på den sammanslagna marginalen är lika med den största höjden på de marginaler som slås ihop.

När ett element visas ovanpå ett annat element, kommer den nedre marginalen på det första elementet att slås ihop med den övre marginalen på det andra elementet. Se bilden nedan:

CSS marginalitetssammanslagningsexempel 1

Prova det själv

När ett element innehåller ett annat element (antag att det inte finns någon inre marginal eller kant som skiljer marginalerna), kommer deras övre och/eller nedre marginaler också att slås ihop. Se bilden nedan:

CSS marginalitetssammanslagningsexempel 2

Prova det själv

Trots att det kan se konstigt ut, kan marginaler till och med slås ihop med sig själva.

Anta att det finns en tom element, som har en marginal men ingen kant eller fyllning. I detta fall kommer den övre marginalen att mötas av den nedre marginalen, och de kommer att slås ihop:

CSS marginalitetssammanslagningsexempel 3

Om denna marginal möter marginalen för en annan element, kommer den också att slås samman:

CSS marginalitetssammanslagningsexempel 4

Detta är varför en rad av paragrafselement använder så lite utrymme, eftersom alla deras marginaler slås samman till en liten marginal.

Marginalitetssammanslagning ser kanske konstig ut till en början, men det är faktiskt meningsfullt. Ta till exempel en typisk textwebbsida som består av flera paragrafer. Rummet ovanför den första paragrafen är lika med den övre marginalen för paragrafen. Om marginalitetssammanslagning inte inträffar, kommer marginalen mellan alla efterföljande paragrafer att vara summan av den närmaste övre marginalen och den nedre marginalen. Detta innebär att utrymmet mellan paragraferna är dubbelt så stort som på sidans topp. Om marginalitetssammanslagning inträffar, slås den övre marginalen och den nedre marginalen samman, vilket gör att avstånden blir konsekventa.

CSS marginalitetssammanslagningens praktiska innebörd

Kommentar:Endast vertikala marginaler för blockelement i den vanliga dokumentströmmen kommer att slås samman. Marginaler mellan inline-boxar, flytande rutor eller absoluta positioner kommer inte att slås samman.