I tried to make boxes the exact height of my <nav>. Had the height for the nav as 10rem and used a 2.25rem font and then did 10-2.25/2 for my padding, but noticed it overflowed a lot. Why is that and why does this value make the boxes look exactly the size of the container?

body{
      background-color: hsl(168, 39%, 64%);
      margin:0;
      padding:0;
    }

.ul-nav{
    display:flex;
    flex-direction:row;
    flex-wrap: nowrap;
    justify-content:space-evenly;
    align-content:stretch;
    height: 100%;
    margin: 0;
    list-style: none;
    margin-left: 7.5rem;
}
.li-nav{
    text-align: center;
}
.nav{
    display: flex;
    position: fixed;
    margin:0;
    padding: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 10rem;
    background-color: hsl(178, 40%, 40%);
}
.nav-a{
    text-decoration: none; 
    color: black;
    display:block;
    font: Arial;
    font-size: 2.25rem;
    margin: 0;
    padding: 3.72rem;
}
.nav-a:hover{
    text-decoration: none;
    background-color: hsl(178, 40%, 30%);

}
.nav-a:visited{
    text-decoration: none;
}

I don't understand why the padding isn't just (height-font size)/2. I am very new to HTML/CSS. I started about 2 months ago and this is my first project I started after getting my certification so please overexplain.

<nav id="nav-bar" >
  <ul >
    <li ><a  href="Grace.html">Home</a></li>
    <li ><a  href="about.html">About</a></li>
    <li ><a  href="pricing.html">Pricing</a></li>
    <li ><a  href="reviews.html">Reviews</a></li>
    <li ><a  href="contact.html">Contact</a></li>
  </ul>
</nav>

CodePudding user response：

That is because the height of li a goes beyond than nav height. You can simply fix this in two ways:

1. Add overflow: hidden to nav.
2. remove the height from nav and instead play with padding. Best way

body {
  background-color: hsl(168, 39%, 64%);
  margin: 0;
  padding: 0;
}

.ul-nav {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  align-content: stretch;
  height: 100%;
  margin: 0;
  list-style: none;
  margin-left: 7.5rem;
}

.li-nav {
  text-align: center;
}

.nav {
  display: flex;
  position: fixed;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  width: 100%;
  /* HERE: YOU CAN REMOVE THIS */
  height: 10rem;
  background-color: hsl(178, 40%, 40%);
  /* HERE */
  overflow: hidden;
}

.nav-a {
  text-decoration: none;
  color: black;
  display: block;
  font: Arial;
  font-size: 2.25rem;
  margin: 0;
  padding: 3.72rem;
}

.nav-a:hover {
  text-decoration: none;
  background-color: hsl(178, 40%, 30%);
}

.nav-a:visited {
  text-decoration: none;
}

<nav id="nav-bar" >
  <ul >
    <li ><a  href="Grace.html">Home</a></li>
    <li ><a  href="about.html">About</a></li>
    <li ><a  href="pricing.html">Pricing</a></li>
    <li ><a  href="reviews.html">Reviews</a></li>
    <li ><a  href="contact.html">Contact</a></li>
  </ul>
</nav>

CodePudding user response：

Yes, You need to remove the height of the Nav because the height: 10rem; overrides padding. it will use the padding for the top of the element but can't do it for the bottom of the element because it overrides it. Again I would suggest to remove the Height of the element.

body {
  background-color: white;
  margin: 0;
  padding: 0;
}

.ul-nav {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  align-content: stretch;
  height: 100%;
  margin: 0;
  list-style: none;
  margin-left: 7.5rem;
}

.li-nav {
  text-align: center;
}

.nav {
  display: flex;
  position: fixed;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  width: 100%;
  /* HERE: YOU CAN REMOVE THIS */
  height: 10rem;
  background-color: red;
  /* HERE */
  overflow: hidden;
}

.nav-a {
  text-decoration: none;
  color: black;
  display: block;
  font: Arial;
  font-size: 2.25rem;
  margin: 0;
  padding: 3.72rem;
  transition: 0.3s;
  font-weight: bold;
}

.nav-a:hover {
  text-decoration: none;
  background-color: darkRed;
  color:white;
}

.nav-a:visited {
  text-decoration: none;
}

<nav id="nav-bar" >
  <ul >
    <li ><a  href="Grace.html">Home</a></li>
    <li ><a  href="about.html">About</a></li>
    <li ><a  href="pricing.html">Pricing</a></li>
    <li ><a  href="reviews.html">Reviews</a></li>
    <li ><a  href="contact.html">Contact</a></li>
  </ul>
</nav>