li 菜单中的 CSS 文本填充不起作用

Question

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

HTML代码:

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

CSS 代码:

.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;
}

所以每当我将填充更改为:

内边距:5px 20px 0 50px;

它使 div 的高度为 55px，而它应该是 50px。希望有人能帮我解决这个问题!谢谢。

Answer 1

这是 box-sizing/padding 和 line-height 的工作原理。我个人认为 line-height 是最好的选择，而且更容易计算。

它们可以一起使用，形成真正棒的组合!

行高/填充 CSS

.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;
}

框大小 CSS

.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;
}

JSFIDDLE