Padding not working properly for the body element

user_11325421 0
Viewed 61

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 class="nav-list">
          <li class="nav-item">
            <a href=""><strong> Tiam Nazari </strong></a>
          </li>
          <li class="nav-item">
            <a href="">Home</a>
          </li>
          <li class="nav-item">
            <a href="">Contact</a>
          </li>
          <li class="nav-item">
            <button class="project-button">
              <a class="projects-link" href="">Projects</a>
            </button>
          </li>
        </ul>
      </nav>
    </header>
  </body>

css html
2 Answers

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 class="nav-list">
        <li class="nav-item">
          <a href=""><strong> Tiam Nazari </strong></a>
        </li>
        <li class="nav-item">
          <a href="">Home</a>
        </li>
        <li class="nav-item">
          <a href="">Contact</a>
        </li>
        <li class="nav-item">
          <button class="project-button">
              <a class="projects-link" href="">Projects</a>
            </button>
        </li>
      </ul>
    </nav>
  </header>

  <section class="first">section 1</section>
  <section>section 2</section>
</body>

user_164963570

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

user_151997190
Related