ContextQMD
Back to Freecodecamp

Step 9

curriculum/challenges/english/blocks/learn-responsive-web-design-by-building-a-piano/612e89562043183c86df287c.md

latest1.8 KB
Original Source

--description--

Browsers can apply default margin and padding values to specific elements. To make sure your piano looks correct, you need to reset the box model.

Add an html rule selector to your CSS file, and set the box-sizing property to border-box.

--hints--

You should have an html selector.

js
assert(new __helpers.CSSHelp(document).getStyle('html'));

Your html selector should have the box-sizing property set to border-box.

js
assert(new __helpers.CSSHelp(document).getStyle('html')?.boxSizing === 'border-box');

--seed--

--seed-contents--

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Piano</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <div id="piano">
      <div class="keys">
        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>

        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>

        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
      </div>
    </div>
  </body>
</html>
css
--fcc-editable-region--

--fcc-editable-region--