Question 174187 in Html Question posted in
Some basic documentation can be found here.

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

Tags:

3

Answers


  1. 0

    To add top and bottom padding to the html element, you can modify the existing CSS code as follows:

    html,
body {
  height: 100%;
  width: 100%;
  padding: 50px 0; /* Add top and bottom padding */
}

/* Rest of the CSS code remains the same */

    By setting padding: 50px 0;, you are adding 50 pixels of padding to the top and bottom of the html element. This will create space between the card and the webpage.

    Make sure to place this code after the existing CSS code you provided. With this modification, both top and bottom padding will be applied simultaneously to the html element.

    Login or Signup to reply.
  2. 0

    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;
}
    Login or Signup to reply.
  3. 0

    Here’s the updated solution for your issue:

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

html,
body {
  height: 100%;
  width: 100%;
  padding: 50px 0;
}

body {
  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;
  margin: 0 auto;
}

    In this updated solution, I removed the display: flex; property from the body selector since it is unnecessary for your specific issue. Instead, I applied margin: 0 auto; to the .stats-preview-card-component class to center the card horizontally within the body element. This should give you the desired spacing between the card and the webpage.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search