25aa04e2e7
* chore(curriculum): accessibility-quiz * chore(curriculum): cafe-menu * chore(curriculum): ferris-wheel * chore(curriculum): fix ferris-wheel tests * chore(curriculum): colored-markers * chore(curriculum): photo-gallery * chore(curriculum): magazine * chore(curriculum): penguin * chore(curriculum): city-skyline * chore(curriculum): registration-form * chore(curriculum): picasso-painting * chore(curriculum): balance-sheet * chore(curriculum): piano * chore(curriculum): rothko-painting * fix: title min 15 chars
1.4 KiB
1.4 KiB
id, title, challengeType, dashedName
| id | title | challengeType | dashedName |
|---|---|---|---|
| 60a3e3396c7b40068ad6997e | Step 21 | 0 | step-21 |
--description--
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.
--hints--
You should set the padding property to 1px.
const hasPadding = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.padding === '1px');
assert(hasPadding);
Your .canvas element should have a padding value of 1px.
const canvasPadding = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('padding');
assert(canvasPadding === '1px');
--seed--
--seed-contents--
.canvas {
width: 500px;
height: 600px;
background-color: #4d0f00;
--fcc-editable-region--
--fcc-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;
}
<!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>