Increasing the font size for hover links changes the background color, how do I stop this?

Question

I am new to html and css, so bear with me. I feel like something simple that I am missing, but I can’t understand that.

For example, I have a navigation bar, for example:

<nav id="navbar">
    <a class="nav" href="#home">Home</a> &#124;
    <a class="nav" href="#link1">Link 1</a> &#124;
</nav>

Using css:

#navbar {
    font-family: "Tahoma", Geneva, sans-serif;
    font-size: 18pt;
    text-align: center;
    background-color: rgba(0,0,0,0.75);
    color: white;
    margin:15px;
    padding: 15px;
}

I set the font of the links to increase the size and change color when hovering over them:

a.nav:hover {
    color: red;
    font-size: larger;
}

Which works well, but when I hit the links, the background of my navigation bar increases a bit down, as if it matches my new text size. How can I stop the background from resizing?

Answer 1

line-height:18pt , , :

a.nav:hover {
  color: red;
  font-size: larger;
  line-height:18pt;
}