边框上的额外填充答案

【问题标题】：Extra padding on border边框上的额外填充
【发布时间】：2016-07-24 18:16:58
【问题描述】：

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

我试过了：

#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

【问题讨论】：

试着把#nav a { line-height:0;border-bottom:0px;}
或者查看这个jsfiddle.net/ygewjby9/3
@mmativ 不起作用，因为边框上仍有额外的填充
你说的是border-bottom的宽度？
如果你想为你的文本添加边框和相同的宽度，试试这个，jsfiddle.net/ygewjby9/4

标签： html css border margin padding

【解决方案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

【讨论】：