How to add top and bottom padding to the html element?

The height of ".stats-preview-card-component" is bigger than the height of my window, so the "HTML" element automatically increased its height, but the top and bottom part of the previously mentioned card end to end to the top and bottom part of the "HTML" element.

To add some more space between the card and the webpage I decided to add some padding to the top and bottom of the "html" element accordingly...

Padding works only if it is either on top or bottom, but not both at the same time!

* {
  margin: 0;
  border: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  width: 100%;
}

html {
  padding: 50px 0;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: #0a0c19;
  font: 400 15px Inter, sans-serif;
}


/* Screen readers only */

.visually-hidden:not(:focus, :active) {
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.stats-preview-card-component {
  height: 780px;
  width: 327px;
  background-color: rgb(28 26 56);
  border-radius: 8px;
}

<header>
  <h1 class="visually-hidden">Stats preview card component</h1>
</header>
<main class="stats-preview-card-component"></main>

Link to work: https://codepen.io/Rock-n-Roll-CRC/pen/PoyVzBb

Solution

Try to add padding only to body element, delete padding property from html element. Also use height and width only for body element

body {
  height: 100%;
  width: 100%;
}


body {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: #0a0c19;
  font: 400 15px Inter, sans-serif;
  padding: 50px 0;
}