html - 边框上的额外填充

Question

我在悬停时在底部边框上添加了额外的填充。有没有办法摆脱额外的填充？

我试过:

#nav a:hover, #nav a:focus {
   border-bottom: solid 3px #000;
   padding: 0;
}

但这会使菜单项移动，因为原始填充已从中移除。

HTML:

<nav id="nav">
  <div class="menu-main-container">
    <ul id="menu-main" class="menu">
      <li id="menu-item-47" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-33 current_page_item menu-item-47"><a href="/">Home</a></li>
      <li id="menu-item-43" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-43"><a href="/contact/">Contact</a></li>
    </ul>
  </div>
</nav>

CSS:

#nav {
  max-height: 100px;
  overflow: hidden;
}
#nav ul {
  margin: 0 0 30px 0;
  text-align: center;
}
#nav ul {
    margin: 0 0 30px 0;
    text-align: center;
}
#nav li {
    font: 400 18px/13px 'Open Sans', sans-serif;
    display: inline-block;
    text-transform: uppercase;
}
#nav a {
  padding: 0 16px;
  color: #343434;
  font-weight: bold;
}
#nav a:hover, #nav a:focus {
  border-bottom: solid 3px #000;
}

JSFiddle

Answer 1

发生这种情况是因为在 css box model 中的填充层上添加了边框。它首先是最里面的填充，然后是边框，然后是边距。要解决此问题，您需要执行以下操作:

取而代之的是:

#nav li {
  font: 400 18px/13px 'Open Sans', sans-serif;
  display: inline-block;
  text-transform: uppercase;
}
#nav a {
  padding: 0 16px;
  color: #343434;
  font-weight: bold;
}

这样做:

#nav li {
  padding: 0 16px; /* added here*/
  font: 400 18px/13px 'Open Sans', sans-serif;
  display: inline-block;
  text-transform: uppercase;
}
#nav a {
  /*padding: 0 16px;*/ /* removed from here*/
  color: #343434;
  font-weight: bold;
}

JSFiddle