Padding not working properly for the body element-CodePudding

I'm trying to give my self some extra space to work with at the bottom of the site by adding bottom-padding: 50px; to the body in CSS but for some reason it does not add anything. I've seen people do this to make the page to a scrollable length but for me it literally does nothing no matter what.

This is the code so far:

body {
  margin: 0px;
  padding-bottom: 500px;
}

header {
  height: 60px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: white;
}


.nav-list {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.nav-item {
  list-style: none;
  margin-right: 25px;
}

.nav-item a {
  font-family: poppins, arial;
  text-decoration: none;
  color: black;
}

.nav-item:first-child {
  margin-right: auto;
  font-size: 16px;
}

.project-button {
  height: 40px;
  width: 100px;
  border: none;
  border-radius: 20px;
  background-color: #86c232;
}

.projects-link {
  font-size: 16px;
}

<body>
    <header>
      <nav>
        <ul >
          <li >
            <a href=""><strong> Tiam Nazari </strong></a>
          </li>
          <li >
            <a href="">Home</a>
          </li>
          <li >
            <a href="">Contact</a>
          </li>
          <li >
            <button >
              <a  href="">Projects</a>
            </button>
          </li>
        </ul>
      </nav>
    </header>
  </body>

CodePudding user response：

The padding is working, you just don't have any content. Height controls the actual height of the element (basically the distance from the outermost edges of the container) whereas padding controls the distance between the content and the edges.

If you want space, add a static height and then remove it once all of your content is in. If you still want white space vertically or horizontally once the content is in, then use padding.

body {
  margin: 0px;
}

section.first {
  height: 800px;
  background-color: orange;
  padding-top: 4em;
}

section:not(.first) {
  background-color: pink;
  height: 600px;
}

header {
  height: 60px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: white;
}

.nav-list {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.nav-item {
  list-style: none;
  margin-right: 25px;
}

.nav-item a {
  font-family: poppins, arial;
  text-decoration: none;
  color: black;
}

.nav-item:first-child {
  margin-right: auto;
  font-size: 16px;
}

.project-button {
  height: 40px;
  width: 100px;
  border: none;
  border-radius: 20px;
  background-color: #86c232;
}

.projects-link {
  font-size: 16px;
}

<body>
  <header>
    <nav>
      <ul >
        <li >
          <a href=""><strong> Tiam Nazari </strong></a>
        </li>
        <li >
          <a href="">Home</a>
        </li>
        <li >
          <a href="">Contact</a>
        </li>
        <li >
          <button >
              <a  href="">Projects</a>
            </button>
        </li>
      </ul>
    </nav>
  </header>

  <section >section 1</section>
  <section>section 2</section>
</body>

CodePudding user response：

It is working for me. Use background-color: red; to see how the body grows. Make sure you're connecting the documents correctly.