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

HTML-CSS
1

The problem is with my .one element. Here is the code:

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>

CSS:

.canvas {
  width: 500px;
  height: 600px;
  background-color: #4d0f00;}

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

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

QUESTION: why .one does not respect the margin of 20px on its top?

Rothko painting
Rothko painting746×688 12.2 KB

2

It actually does have a margin on the top, but the margin is above, in the white area. You could give .canvas a display of relative and then give .one a display of absolute. (although you will have to use flex box to display .one in the center again)

3

This step asks for you to add a padding to .canvas

Are you asking about this step, or is it a more general question about how padding works?

4

The white area is the frame’s box but .one is directely inside the canvas’ box so its margin should be between its border and the canvas border right? As you said, it does not

5

Actually I pass this step. I just want to understand why the box behave like that.

6

When I want to understand the behaviour of elements, I like to use a 1px border on the HTML document so I can get a sense to where elements really are.

using ‘right mouse click’ on the element and ‘inspect’ lets me see the box model highlighted in my browser. (not all browsers are the same)

I encourage you to take a look at your own browsers dev tools to see how the elements are behaving.
You will learn much more from experimenting with them, than I could ever teach you :smiley:

7

Okay. Thank you I chek it

1 Like
8

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