li菜单中的CSS文本填充无效

我目前正在创建一个UL菜单，我遇到了一些困难。每当我试图在LI中向下移动文本时，就会使div变大

HTML代码：

<ul class="accordion"> 
        <li class="files">
                <a href="#one">Dashboard<span>0</span></a>
        </li>
</ul>

因此，每当我将填充改为：

填充：5px20px050px

它使div的高度为55px，而它应该是50px。希望有人能帮我！谢谢。

以下是盒子大小/填充和线条高度的工作原理。我个人的意见是，线的高度是最好的选择，更容易计算

他们可以一起使用一个真正棒的组合

行高/填充CSS

框大小CSS

---

除非使用css框大小调整，否则将在顶部添加5px，并将其添加到高度。为了让文本在中间垂直对齐，你可以使用线宽。显示：内联块；谢谢你们两个！没问题，我添加了一个答案和jsfiddle来显示方框大小/线条高度。如果您愿意，您可以将其标记为已接受或我认为合适的任何内容。：]

.accordion li > a {
        display: block;
        position: relative;
        min-width: 110px;
        padding: 0 20px 0 50px;
        height: 50px !important;
        color: #C8C8C8;
        font: bold 12px/32px Arial, sans-serif;
        text-decoration: none;
}

.lH {
  width: 80px;
  height: 50px;
  text-align: center;
  display: block;
  border-radius: 5px;
  border: 2px solid rgba(0, 0, 0, 0.4);
  background: #ff7200;
  line-height: 50px;
  margin-bottom: 50px;
}

.bS {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 80px;
  height: 50px;
  text-align: center;
  display: block;
  border-radius: 5px;
  border: 2px solid rgba(0, 0, 0, 0.4);
  background: mediumSeaGreen;
  padding: 12px 0;
}