添加边框到元素，同时保持父元素的高度相同

Question

我希望在悬停时为元素添加边框，同时保持父div大小相同。

目前，当我添加边框时，它会使父div的高度变大。

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>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="http://www.google.com">Google</a>
</nav>

Answer 1

您可以添加透明边框来替换悬停时添加的边框。

在这种情况下，您可以使用：

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>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="http://www.google.com">Google</a>
</nav>

Answer 2

有几种方法可以做到。

方法1 - 为<a>提供透明边框：

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;
}

方法2 - 给<nav>一个固定的高度：

nav{
height:45px;
}