How does "overflow: hidden;" work the same way as 1px of padding in step 22 of CSS Box Model?

In step 21 we are told to put a 1px of padding around the canvas so that the first div pushes off of the padding around the canvas instead of pushing itself and the canvas off of the nearest border which is on the frame.

This makes sense, but then in step 22 we are told to remove that padding and instead use “overflow: hidden;” which is supposed to preserve the original dimensions of the canvas, and it does exactly that, but I can’t wrap my head around how that is working.

I like to understand how the code works because it makes it tremendously easier to visualize and create something based on my understanding of it, so I’m asking about this small step because I would like to understand what it’s doing exactly.

Thank you everyone for reading and replying if you did!

  **Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Rothko Painting</title>
    <link href="./styles.css" rel="stylesheet">
  </head>
  <body>
    <div class="frame">
      <div class="canvas">
        <div class="one"></div>
      </div>
    </div>
  </body>
</html>
/* file: styles.css */
.canvas {
  width: 500px;
  height: 600px;
  background-color: #4d0f00;
  padding: 1px;
}

.frame {
  border: 50px solid black;
  width: 500px;
  padding: 50px;
  margin: 20px auto;
}

.one {
  width: 425px;
  height: 150px;
  background-color: #efb762;
  margin: 20px auto;
}
  **Your browser information:**

User Agent is: Chrome/102.0.5005.115

Challenge: Step 22

Link to the challenge:

Check this thread

2 Likes

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