Step 21 of this project says the top margin of the innermost div element is pushing onto the border of the outermost div element. This isn’t making any sense to me for two reasons. Firstly, I can see how margins push against, but how can they ever push onto part of another element? Is this just a poor word choice? Secondly, it appears to me that the top margin is pushing against the padding of the other div element, not its border as the explanation says. Lastly, before completing the step, why does the child div element carry its parent div down with it? I can see why a parent would carry its child elements when it moves, because the contents have to move with the container. But why does the child carry its parent element? The child has the top margin here, not the parent. I’m very confused here.
Hello there,
We recommend familiarising yourself with how to ask a question on this forum. Specifically, you are more likely to get useful help, if you provide a helpful title and description:
Looks like I included everything shown there. What did I miss? Links are there at the bottom. You just have to remove the 1px padding in that step and/or visit the codepen page to see what I’m talking about.
It is margin collapse. The child’s margin is collapsing and passing through the parent.
And yes, it is pushing against the frame padding, not the border. Not sure how I interpret the “onto the frame’s border” part of the challenge text.
If you remove the padding it would push against the border and if you removed the border it would collapse through all its parent containers including the body and push against the root element. All the parent elements it is collapsing through “follow” the child down, even the body element is pushed down (when the child is pushing against the root).
This post is about step 22 but it explains some of the same stuff
Thanks for clearing that up. I’ll have to spend more time digging into this topic, but for now is it safe to say that vertical margins collapse whenever they overlap because there’s nothing separating them? Is there a good reason why the child element has to move its parent elements with it, or is that simply a rule that could’ve gone either way? I don’t get why the .one element has to move its parents down with it or why they have to be affected.
I think it is because the parent(s) has to contain the child, so they have to move with it. Otherwise, the child would overflow the parent.
I can’t say I know off the top of my head what the rules are for overflows but I’d assume the behavior is spec compliant.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.