Monk-e-business Een webmaster’s code repository

September 3, 2015

Collapsing margins: een WTF en Ah

Filed under: CSS — Tags: — Welltrained Monkey @ 5:56 pm

Warning: Use of undefined constant wpurl - assumed 'wpurl' (this will throw an Error in a future version of PHP) in /data/sites/web/vanautrevebe/subsites/www.monk-e-business.be/wp-content/plugins/add-to-facebook-plugin/addtofacebook.php on line 53

Je hebt het waarschijnlijk al meegemaakt, je hebt 2 containers met aparte verticale marge en blijkt dat de uiteindelijke verticale marge niet overeenkomt met het verwachte resultaat… zijnde de som van de 2 marges.
Dat heeft dus te maken met collapsing margins.

Blijkbaar is het zo dat als beide marges positieve zijn, de grootste van de 2 wordt gebruikt en dus niet de som.
Zet je onder een container met een bottom-margin van 15px een andere container met een top-margin van 20px dan zou je verwachten dat de ruimte tussen die 2 containers 35px zou zijn. Wat blijkt, de marge tussen de 2 containers bedraagt 20px.

Hetzelfde scenario gebeurd met parents en children.
Stel de parent heeft een marge van 20px en alle children hebben een marge van 15px, dan zou je verwachten dat de totale marge 35px is maar het blijft dus 20px.
Het enige wat dit verbreekt is het gebruik van iets ‘vast’ tussen de 2 containers zoals een padding van 1px of een border-top van 1px.

Dit onduidelijk gedrag maakt het heel moeilijk om iets altijd correct te tonen.

Powered by WordPress