Why should I witre an overflow:hidden here?

[Dovb1ek]

Q1: Why replace the padding:1px with overflow:hidden to solve the margin collasping?

Q2: I think there is no overflow in the div container with class “canvas”,isn`t it?

Q3: Also,I am curious about the reason why overflow:hidden can work as padding:1px without affecting the dimension of the “canvas” when there is no overflow(If the answer of Q2 is Yes…)

Pic1(with padding:1px )

Pic2(with overflow:hidden )

Class source:
Certified Full Stack Developer Curriculum>>>The Box Model>>>Workshop Design a Rothko Paiting

Pre-thanks for your answers to my questions!!!

[robheyays]

Are you saying that overflow isn’t needed here? Also if you could post a link to this challenge and the code using </> that would help.

[lasjorg]

1. Padding even if only 1px is still extra space created to solve a problem not directly related to needing more padding.

2. overflow creates a new block formatting context, that is what it is used for here. Not for hiding an element overflow.

3. See 2.

(help to understand)CSS Box Model by Building a Rothko Painting -step 22

MDN: Overflow establishes a Block Formatting Context MDN: Block Formatting Context You can achieve the same effect by using display: flow-root. You can think of the padding on the container as giving the inner box something to push against. The same would happen if you added a border on the container border: 0.1px solid transparent; If you remove the padding on the .frame it may help to better see what is happening. Although it might still seem like unexpected behavior. It is techni…