Tell us what’s happening:
Someone please help! As I understand since there is no padding between the two div elements classed as canvas and one, whatever margin I add to the border of one is pushing down canvas as well because they’re essentially touching. How exactly is the syntax overlflow: hidden changing that and making it work like there is padding?
From my research if I use set the value of overflow to hidden it will clip the overflowing content. So, to the best of my understanding the overflow (in this case the margin of one) should be clipped but one and canvas should still be sticking together.
What’s actually happening is it’s working as if I added a padding between canvas and one and the margin is just pushing the padding.
Your code so far
/* file: styles.css */
.canvas {
width: 500px;
height: 600px;
background-color: #4d0f00;
/* User Editable Region */
overflow: hidden;
/* 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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36 Edg/113.0.1774.50
Challenge: Learn the CSS Box Model by Building a Rothko Painting - Step 22
Link to the challenge: