0

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" class="nav">
  <ul class="ul-nav">
    <li class="li-nav"><a class="nav-a" href="Grace.html">Home</a></li>
    <li class="li-nav"><a class="nav-a" href="about.html">About</a></li>
    <li class="li-nav"><a class="nav-a" href="pricing.html">Pricing</a></li>
    <li class="li-nav"><a class="nav-a" href="reviews.html">Reviews</a></li>
    <li class="li-nav"><a class="nav-a" href="contact.html">Contact</a></li>
  </ul>
</nav>
kmoser
  • 8,780
  • 3
  • 24
  • 40
Calvinism
  • 3
  • 2

2 Answers2

0

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" class="nav">
  <ul class="ul-nav">
    <li class="li-nav"><a class="nav-a" href="Grace.html">Home</a></li>
    <li class="li-nav"><a class="nav-a" href="about.html">About</a></li>
    <li class="li-nav"><a class="nav-a" href="pricing.html">Pricing</a></li>
    <li class="li-nav"><a class="nav-a" href="reviews.html">Reviews</a></li>
    <li class="li-nav"><a class="nav-a" href="contact.html">Contact</a></li>
  </ul>
</nav>
Amini
  • 1,620
  • 1
  • 8
  • 26
  • But why is li a larger than nav. How would I make it the same. I did remove the original height from nav and it seemed to fix it. Thanks for your help. – Calvinism Mar 23 '22 at 01:44
  • It is because you manually set the padding for *li a*. It's not recommended to manually set padding so it becomes the same height as the parent height. I would appreciate it if you upvote and accept my answer. – Amini Mar 23 '22 at 01:48
0

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" class="nav">
  <ul class="ul-nav">
    <li class="li-nav"><a class="nav-a" href="Grace.html">Home</a></li>
    <li class="li-nav"><a class="nav-a" href="about.html">About</a></li>
    <li class="li-nav"><a class="nav-a" href="pricing.html">Pricing</a></li>
    <li class="li-nav"><a class="nav-a" href="reviews.html">Reviews</a></li>
    <li class="li-nav"><a class="nav-a" href="contact.html">Contact</a></li>
  </ul>
</nav>
Isaac Newton
  • 15
  • 1
  • 2