Add border to element while keeping parent element the same height - html

Question

I'm looking to add a border to an element on hover while also keeping the parent div size the same.
Currently when I add the border it makes the parent div larger in height.
nav {
margin: 0px auto 1px auto;
padding-bottom: 1px;
display: inline-block;
position: fixed;
background-color: #000;
width: 100%;
}
nav a {
padding: 10px;
float: left;
font-size: 20px;
background-color: #000000;
color: white;
text-decoration: none;
box-sizing: border-box;
}
nav a:first-child {
margin-left: 25px;
}
nav a:hover {
background-color: red;
border-left: 1px white solid;
border-right: 1px white solid;
border-bottom: 1px white solid;
}
<nav>
Home
About
Google
</nav>

Answer 1

You could add a transparent border to displace the one that is added on hover.
In this case, you could use:
nav a {
border: 1px transparent solid;
border-top: none;
}
nav {
margin: 0px auto 1px auto;
padding-bottom: 1px;
display: inline-block;
position: fixed;
background-color: #000;
width: 100%;
}
nav a {
padding: 10px;
float: left;
font-size: 20px;
background-color: #000000;
color: white;
text-decoration: none;
box-sizing: border-box;
border: 1px transparent solid;
border-top: none;
}
nav a:first-child {
margin-left: 25px;
}
nav a:hover {
background-color: red;
border: 1px white solid;
border-top: none;
}
<nav>
Home
About
Google
</nav>

Answer 2

There are a couple of ways to do it.
Method No. 1 - Give the <a> a transparent border:
nav a {
padding: 10px;
float: left;
font-size: 20px;
background-color: #000000;
color: white;
text-decoration: none;
box-sizing: border-box;
border-left: 1px transparent solid;
border-right: 1px transparent solid;
border-bottom: 1px transparent solid;
}
Method No. 2 - Give the <nav> a fixed height:
nav{
height:45px;
}