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>