'Why is my padding not working in my footer bar?

I don't understand why my top and bottom padding is not zero? The border around the text has a padding of zero so why is it so far away from the text? see the image:

enter image description here

footer {
  background-color: black;
  font-size: 40px;
}

.footertable {
  position: relative;
  list-style-type: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  color: rgb(255, 255, 255);
  margin: 0%;
}

.footertext {
  text-align: center;
  padding: 0px 0px;
  margin: 0px;
  font-size: 0.8em;
  border-style: dashed;
  border-color: rgb(255, 0, 0);
}
<footer>
  <ul class="footertable">
    <li class="footertext">
      <p>footer</p>
    </li>
    <li class="footertext">
      <p>footer</p>
    </li>
    <li class="footertext">
      <p>footer</p>
    </li>
  </ul>
</footer>
htmlcsspadding


Solution 1:[1]

Often you want to reset all your margins and paddings before writing any CSS.

* {
  margin: 0;
  padding: 0
}

Then you can adjust the margins and paddings of individual elements afterwards.

For more on this see Reset style sheet.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Script Raccoon

Related Questions