Css 悬停链接时出现导航栏边距问题

我对引导导航栏有一个问题，我正在尝试做与Twitter相同的导航栏，一旦你在链接上悬停，就会出现一个小小的底部边框，我已经达到了这个行为，但是一旦出现了边框，导航栏的高度就会改变。我为你录音，让你低调，我也准备好了；奇怪的是，当你将鼠标悬停在Logo部分时，导航栏的高度并没有改变

这是我的css：

.capilleira-navbar{
  background: getColor(snow);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 1.1);
  a {
    color: getColor(night);
  }
  a:hover, a:focus {
    background: getColor(snow) !important;
    color: lighten(getColor(red), 10%);
    border-bottom: 4px solid lighten(getColor(red), 10%);
    margin: 0px;
    transition: all 0.3s ease 0s;
  }
}

这里是我的导航栏：

<nav class="navbar capilleira-navbar">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="#/lines">LOGO</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#/lines">Sports <span class="sr-only">(current)</span></a></li>
            <li><a href="javascript:void(0);">Poker</a></li>
            <li><a href="javascript:void(0);">Casino</a></li>
            <li><a href="javascript:void(0);">Horses</a></li>
            <li><a href="javascript:void(0);">Info</a></li>
          </ul>
        </div>
      </div><!--/.navbar-collapse -->
    </nav>

不使用边框使用框阴影，它没有这个问题

对于css中的a:hover，请使用此选项

 a:hover, a:focus {
    background: getColor(snow) !important;
    color: red;
    box-shadow: inset 0px -4px 0px 0px red;//this <--
    margin: 0px;
    transition: all 0.3s ease 0s;
  }

a:悬停，a:聚焦{
背景：getColor（雪）！重要；
颜色：红色；
盒子阴影：插入0px-4px0px 0px红色；//这是鲁滕说的。。。
或者你可以使用固定高度

a {
    color: getColor(night);
    height:50px;
  }

这是正确的答案，试着解释一下为什么这样做。Logo之所以有效，是因为它的固定高度为50px，并且属性
框大小：border box
使边框位于该高度内……由于菜单上的链接没有任何固定高度，因此框大小没有任何影响，边框只是添加到实际高度。