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

Tell us what’s happening:ive tried .frame{

padding :50px;
} and its not working?
Use padding to adjust the spacing within an element.

In .frame, use the padding shorthand property to increase the space between the .frame and .canvas elements by 50px. The shorthand will increase space in the top, bottom, left, and right of the element’s border and canvas within.

this isnt working . frame{
padding : 50px;
}

Your code so far

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

.frame {
  border: 50px solid black;
  width: 500px;

/* User Editable Region */


.frame {
    padding: 50px;
}


/* User Editable Region */

}
<!-- 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>
    </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/123.0.0.0 Safari/537.36 Edg/123.0.0.0

Challenge Information:

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

Hi there! You’re already have .frame selector, so just add a new rule to it, no need to duplicate this selector
Also don’t forget a closing curly brace, now you have it out of User Editable Region

1 Like

thanks please,it worked

1 Like