1.9 KiB
1.9 KiB
| id | title | challengeType | dashedName |
|---|---|---|---|
| 60a3e3396c7b40068ad6998b | Step 33 | 0 | step-33 |
--description--
Può essere utile spingere i margini in una direzione.
In questo caso, il margine inferiore dell'elemento .one spinge .two verso il basso di 20 pixel.
Nel selettore .two, usa la proprietà shorthand margin per impostare il margine superiore a 0, i margini orizzontali su auto e il margine inferiore a 20px. In questo modo, rimuoverai il margine superiore, centrando orizzontalmente l'elemento e imposterai il margine inferiore a 20 pixel.
--hints--
Dovresti assegnare alla proprietà margin il valore 0 auto 20px.
const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === '0px auto 20px');
assert(hasMargin);
Il selettore .two dovrebbe avere una proprietà margin con il valore 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>