1.8 KiB
1.8 KiB
id | title | challengeType | dashedName |
---|---|---|---|
60a3e3396c7b40068ad6998b | Step 33 | 0 | step-33 |
--description--
It's helpful to have your margins push in one direction.
In this case, the bottom margin of the .one
element pushes .two
down 20 pixels.
In the .two
selector, use margin
shorthand property to set top margin to 0
, horizontal margin to auto
, and bottom margin to 20px
. This will remove its top margin, horizontally center it, and set its bottom margin to 20 pixels.
--hints--
You should set the margin
property to 0 auto 20px
.
const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === '0px auto 20px');
assert(hasMargin);
Your .two
element should have a margin
value of 0 auto 20px
.
const twoMargin = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('margin');
assert(twoMargin === '0px auto 20px');
--seed--
--seed-contents--
.canvas {
width: 500px;
height: 600px;
background-color: #4d0f00;
overflow: hidden;
}
.frame {
border: 50px solid black;
width: 500px;
padding: 50px;
margin: 20px auto;
}
.one {
width: 425px;
height: 150px;
background-color: #efb762;
margin: 20px auto;
}
.two {
width: 475px;
height: 200px;
background-color: #8f0401;
--fcc-editable-region--
margin: auto;
--fcc-editable-region--
}
.three {
width: 91%;
height: 28%;
background-color: #b20403;
margin: 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 class="two"></div>
<div class="three"></div>
</div>
</div>
</body>
</html>