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

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">
    <meta charset="UTF-8">
    <title>Rothko Painting</title>
    <link href="./styles.css" rel="stylesheet">
    <div class="frame">
      <div class="canvas">
        <div class="one"></div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/ 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:

The effect you observe, where it appears as if there is padding between the elements, is an optical illusion caused by the content being clipped and hidden within the fixed height of the .canvas element. It might give the impression that there is padding, but technically, it’s the overflowing content that is being hidden.

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