How does padding actually work? I'm confused

Tell us what’s happening:
So, I know that I’m supposed to put four padding values and actually only put one. I did it so I could demonstrate what confuses me.

According to the documentation over at Mozilla, and also everything I’ve learnt so far:

“When one value is specified, it applies the same padding to all four sides

and it clearly doesn’t do that here. The box is pushed all the way down and to the right. Shouldn’t it be symmetrical? What’s going on?

  **Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html>
<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>
/* file: styles.css */
html {
box-sizing: border-box;
}

*, *::before, *::after {
box-sizing: inherit;
}

#piano {
background-color: #00471b;
width: 992px;
height: 290px;
margin: 80px auto;
padding: 90px
}

.keys {
background-color: #040404;
width: 949px;
height: 180px;
padding-left: 2px;
}
  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36

Challenge: Step 15

Link to the challenge:

play around with the width and height of .keys, from very small to very big and you will see.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.