Links inside list items have a height greater than the list element - what's going on?

Question

I have a nav containing a list of links. The list has a line-height: 1em. However the links have a height greater than 1em and overlap the

Answer 1

the weird thing you were doing is to set the font-size of nav which is parent of ul li to 10rem that had made them bigger and also line-height is different from the actual height just se here line-height

example

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

nav {
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 7.2rem;
  left: 0;
  right: 0;
  /* font-size: 10rem;*/
}

nav li {
  margin: 10px;
  background-color: green;
}

nav a {
  background-color: pink;
}

  

    
Projects
    
About
    
Services
    
Ethics
    
Contact