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

HTML-CSS
1

Tell us what’s happening:

Not a problem but a question. Regarding down 20pixel:
.
.
.

THE COURSE SAYS:

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.

How does the canvas class go down 20px? and when adding margin to the top (.one class), remove the 20px down (canvas class).

Your code so far

/* file: styles.css */
.canvas {
  width: 500px;
  height: 600px;
  background-color: #4d0f00;

/* User Editable Region */



/* User Editable Region */

}

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

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

<!-- 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>

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Challenge Information:

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

2
  • within “.frame” check out “margin”, as per html structure, canvas container is “frame” class div

hopefully this was useful, happy coding :slight_smile:

1 Like
3

Just wanted to point out that the initial reason that the whole canvas was pushed down is a concept in css called: collapsing margins.
You can read about it here: Mastering margin collapsing - CSS: Cascading Style Sheets | MDN

1 Like