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

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>