---
id: 612e89562043183c86df287c
title: الخطوة 9
challengeType: 0
dashedName: step-9
---

# --description--

يمكن للمتصفحات تطبيق الـ margin الافتراضي وقيم الـ padding على عناصر محددة. للتأكد من أن البيانو الخاص بك يبدو صحيحا، تحتاج إلى إعادة تعيين الـ box model.

قم بإضافة منتقي قاعدة `html` إلى ملف CSS الخاص بك، وتعيين خاصية `box-sizing` إلى `border-box`.

# --hints--

يجب أن يكون لديك منتقي `html`.

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

يجب أن يكون لمنتقي `html` الخاص بك `box-sizing` بقيمة `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--
```
