---
id: 612e89562043183c86df287c
title: Hatua ya 9
challengeType: 0
dashedName: step-9
---

# --description--

Vivinjari vinaweza kutumia ukingo chaguomsingi (default margin) na thamani za padding kwenye vipengele mahususi. Ili kuhakikisha kuwa piano yako inaonekana sawa, unahitaji kuweka upya muundo wa kisanduku.

Ongeza kichaguzi cha sheria cha `html` kwenye faili yako ya CSS, na uweke kipengele cha `box-sizing` kuwa `border-box`.

# --hints--

Unapaswa kuwa na kichaguzi cha `html`.

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

Kichaguzi chako cha `html` kinafaa kuwa na sifa ya `box-sizing` iliyowekwa kuwa `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--
```
