Can someone explain the concept?

I’m quite confused by the concept here.
In Step 21 of Rothko Painting

What exactly happened?
The child of canvas(.one) was pushing on .frame’s border moving .canvas down.
And adding a padding to .canvas solved that??

That doesn’t make much sense. Was the padding box not in existence before hand?

Explanation of what happened here would be greatly appreciated :slight_smile:

pushing past the canvas and onto the frame’s border

It’s worded a bit odd, but it is pushing against the padding on .frame.

It’s margin collapse. You can think of it as the child’s margin “overflowing” its parent container. Try removing the padding on .frame, the white space you see is the top margin on .one pushing outside the parent .canvas container and pushing against the border on .frame.

If you continue with the next challenge it shows how to establish a new Block Formatting Context by using overflow: hidden.

This thread has some more information.

2 Likes

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.