freeCodeCamp/curriculum/challenges/italian/14-responsive-web-design-22/learn-the-css-box-model-by-.../60a3e3396c7b40068ad6997e.md

1.5 KiB

id title challengeType dashedName
60a3e3396c7b40068ad6997e Step 21 0 step-21

--description--

Ora, l'elemento .one è centrato orizzontalmente, ma il suo margine superiore si sta spingendo oltre la tela fin sul bordo della cornice, spostando tutta la tela in giù di 20 pixel.

Aggiungi un padding di 1px all'elemento .canvas così che l'elemento .one abbia qualcosa di solido intorno.

--hints--

Dovresti assegnare alla proprietà padding il valore 1px.

const hasPadding = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.padding === '1px');
assert(hasPadding);

Il selettore .canvas dovrebbe avere una proprietà padding con il valore 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>