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

HTML-CSS
1

Step 22

I don’t understand why setting overflow to hidden works in this step. Does overflow create a padding? Which part of the rectangle one is overflowing here?

Appreciate any help and answer.

2 Likes
2

Hi @jingren1021 and welcome!!

Really great question!! Not trivial.

I have put this code inside the freeCodeCamp editor first:

/* This is my first line of code  */
* {
  outline: 3px solid red;
}

.canvas {
  /* other code */

   /* padding: 1px; */
  /* overflow: hidden; */
  outline: 5px solid pink;
}

Whith this you now can open the dev tools, F12 probably work. Play with comments after. Check the model box for the .frame element. This element increase and decrease its height in 20px. Why? Because one of his children (.one) has a 20px margin-top . The magic here is margin collapsing, the parent ended with 20px margin-top because when two elements with collapse their margins they take the bigger margin; in this case 20px in .one > 0px in .frame.
Search in YouTube for Kevin Powell margin collapsing video, he has a couple. I think you will understand.

I hope this help. Happy coding!!

1 Like