Learn the CSS Box Model by Building a Rothko Painting - Step 20

[jeff1.61803]

I noticed something strange in the CSS Box Model by Building a Rothko Painting - Step 20.

I’m using Firefox 110.0.1. At the beginning of this step, there is a 50px space between the div.frame border and the div.canvas.

However changing the margin as of .one to margin: 20px auto;, I notice the space increased to 70px. div.one is a child of div.canvas. Why does changing the margin of div.one move its parent?

I’ve read posts on this forum and information on the web about margin collapse but I can’t find anything that exactly answers this question.

[bbsmooth]

That original 50px space, what type of space is that? Be specific.

[jeff1.61803]

Thanks for replying. I believe the original 50px space is padding from the div.frame.

[bbsmooth]

Correct. The key here is “padding”, which doesn’t collapse. So 50px padding + 20px margin = 70px.

[jeff1.61803]

Hi bbsmooth, Thank you. But, I’m still confused. There are three nested levels, div.frame, div.canvas, and div.one.

<div class="frame">
  <div class="canvas">
    <div class="one">

The div.frame has 50px padding. In step 20, the div.one margin is set to 20px auto. What I find perplexing is that div.canvas moves when div.one’s margin is set.

[jeff1.61803]

I also noticed that if I put something in div.canvas before div.one, the space between the frame border and the canvas goes back to 50px. It is as if there’s some rule about the padding of a child element propagating to it’s parent if there is no other content before the child element.

The top image below shows the result after adding the margin in step 20. The bottom image shows the result if I then insert a character like this.

   <div class="frame">
      <div class="canvas">
        M
        <div class="one"></div>

[jeff1.61803]

@bbsmooth. In case someone runs across this post. I have found an explanation for why div.canvas moves when div.one’s margin is changed. It is due to the margin collapse rules. In this step, div.canvas’s and div.one’s top margins are collapsed. See this stackoverflow thread.

[abz2023]

I have been reading on this topic. There’s a lot to the margin and padding property.
Thanks.