html - CSS:边框比 div 容器高

Question

我正在为我的网站制作一个菜单，在那里我隐藏了溢出，所以边框高度不会比菜单大，但过了一段时间我需要摆脱 overflow:hidden 选项.

去掉这个参数后，底部出现了两倍高的边框。

这是我在导航器菜单上用于按钮的相关样式:

.Button {
  display: block;
  font-size: 10pt;
  float: left;
  right: 15%;
  left: 30%;
  top: 0%;
  white-space: nowrap;
  color: white;
  margin-top: 0%;
  width: 7%;
  font-family: sans-serif;
  height: 0%;
  padding: 25px 2px 55px 2px;
  vertical-align: center;
  text-align: center;
  line-height: 6px;
  border-right: 1px solid rgba(0, 0, 0, 0.25);
  border-left: 1px solid rgba(0, 0, 0, 0.25);
  box-shadow: 1px 0 rgba(255, 255, 255, 0.03);
  border-radius: 5px;
  min-width: 100px;
  transition: 0.1s ease-in;
}

我试过 no-repeat 选项但没有成功，之后边框会完全消失。

在那之后，我尝试将 padding-bottom 值设置为 0，但没有做出任何改变。

box-sizing 设置为 border-box:

*,
*::before,
*::after {
  box-sizing: border-box;
}

我还尝试将高度值设置为 0，但也没有任何改变。

Fiddle. (个人资料图片是样本，所以这不是问题)。

---

那么问题是什么呢？我怎样才能在不隐藏菜单溢出的情况下摆脱它？有没有我做错的 anchor 标签？

Answer 1

试试 box-sizing: border-box，它不允许 padding 增加元素的尺寸