59f21b1d8f
* Improved instructions in rothko painting lesson * Removed duplicate line in step 42 * Update curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-012.md Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * Update curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-014.md Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * Update curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-015.md Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * Update curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-021.md Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * Update curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-022.md Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * Update curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-034.md Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * Update curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-041.md Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * Update curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-042.md Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * Update curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-044.md Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * Update curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-045.md Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * Update curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-020.md Co-authored-by: Sem Bauke <46919888+Sembauke@users.noreply.github.com> * Update curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-014.md Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * Update curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-034.md Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> Co-authored-by: Sem Bauke <46919888+Sembauke@users.noreply.github.com>
1.3 KiB
1.3 KiB
id, title, challengeType, dashedName
| id | title | challengeType | dashedName |
|---|---|---|---|
| 60a3e3396c7b40068ad69977 | Step 14 | 0 | step-14 |
--description--
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.
--hints--
You should set the padding property to 50px.
const hasPadding = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.padding === '50px');
assert(hasPadding);
Your .frame element should have a padding value of 50px.
const framePadding = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('padding');
assert(framePadding === '50px');
--seed--
--seed-contents--
.canvas {
width: 500px;
height: 600px;
background-color: #4d0f00;
}
.frame {
border: 50px solid black;
width: 500px;
--fcc-editable-region--
--fcc-editable-region--
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rothko</title>
<link href="./styles.css" rel="stylesheet">
</head>
<body>
<div class="frame">
<div class="canvas">
</div>
</div>
</body>
</html>