Web Developer & Linux Blog

Ich habe neuelich “entdeckt”, dass zwei aufeinander folgende <p>-HTML-Elemente, die einen jeweils einen margin-top und margin-bottom haben, näher aneinanderstehen, als ich es eigentlich erwarte. Normalerweise würde ich erwarten, dass ein Element mit margin-bottom von 15px und einem folgenden Element mit margin-top von 15px insgesamt 30px auseinander liegen müssen. Falsch gedacht…

Erst dachte ich, es läge vielleicht daran, dass <p>-Tags generell eine andere CSS-Eigenschaft haben, die diesen Effekt erzeugt – er ist ja gerade bei Textformatierung auch super praktisch. Als ich einen Kollegen drauf ansprach sagte der mir aber gleich, dass dieser Effekt bei allen Block-Elementen auftauche, so lange andere Bedinungen erfüllt sind. – Aha!? – Das ganze nennt man wohl “Collapsing Marigins” und tritt immer dann auf, wenn zwei aufeinanderfolgende Block-Elemente nicht mehr mit einem padding oder border getrennt werden. So beschreibt es jedenfalls Andy Budd in seinem Blog-Eintrag aus dem Jahre 2003 – man lernt ja nie aus! O:-)