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

I don’t understand what this step means, how is .one’s top margin shifting the whole thing down. And why does adding padding at .canvas fixes it?

Step 21

Now .one is centered horizontally, but its top margin is pushing past the canvas and onto the frame’s border, shifting the entire canvas down 20 pixels.

Add padding of 1px to the .canvas element to give the .one element something solid to push off of.

.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;
}
<!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>

please give a link to the course

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