J Tan11,845 Points
Why adding padding to only .main-header fixes collapse?
I tried adding
padding: 1em 0; to .wrapper which contains .main-header, but it doesn't fix the collapse. I also tried adding the same padding statement to h1 tag but it doesn't fix it either.
Why does padding fix only works with .main-header class?
Steven Parker204,000 Points
There's 3 types of margin collapse: sibling, parent-child, and empty element. Padding only stops the collapse if applied to the parent in parent-child collapse, or to an empty element. It no effect on sibling collapse or when applied to the child in a parent-child collapse. For more info see Mastering margin collapsing.
One other remedy I've always found odd is setting the
overflow property on one of the elements in the collapse.