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.3 KiB
1.3 KiB
id, title, challengeType, dashedName
| id | title | challengeType | dashedName |
|---|---|---|---|
| 60a3e3396c7b40068ad69978 | Step 15 | 0 | step-15 |
--description--
Use margins to adjust the spacing outside of an element.
Using the margin property, give the .frame element vertical margin of 20px, and horizontal margin of auto. This will move the frame down 20 pixels and horizontally center it on the page.
--hints--
You should set the margin property to 20px auto.
const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === '20px auto');
assert(hasMargin);
Your .frame element should have a margin value of 20px auto.
const frameMargin = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('margin');
assert(frameMargin === '20px auto');
--seed--
--seed-contents--
.canvas {
width: 500px;
height: 600px;
background-color: #4d0f00;
}
.frame {
border: 50px solid black;
width: 500px;
padding: 50px;
--fcc-editable-region--
--fcc-editable-region--
}
<!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>