按钮上的等填充不均匀分布

Question

嘿伙计们，我只是将一个小问题应用于按钮，我应用了以下样式：

.btn-request-more-info {
    background: #fff;
    color: #6e2c91;
    font-size: 18px;
    padding: 0.5 2.5em;
    border: 1px solid #fff;
    font-weight: 900;
    text-transform: uppercase;
    border-radius: 10px;
    border: 1px solid #fff;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

现在因为上面的方法不起作用，我不得不使用hack并从按钮的底部填充减少1px：

.btn-request-more-info {
    background: #fff;
    color: #6e2c91;
    font-size: 18px;
    padding: 10px 2.5em 9px;
    border: 1px solid #fff;
    font-weight: 900;
    text-transform: uppercase;
    border-radius: 10px;
    border: 1px solid #fff;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

10px以上和9px以下，为什么会这样：

`0.5em` padding is not equally distributed ??

P.S。重新创建错误请将按钮中的样式更改为padding:0.5em 2em。

填充的差异（我使用标尺直观地显示填充分布的差异）。

上面的填充：

填充如下：

我以前曾经多次遇到这个问题，但从未找到过解决方案，所以我教过我会把它发布到SO以了解为什么会发生这种情况。

LINK TO SITE

谢谢。

Answer 1

这可能是因为css的line-height属性。如果您从开发人员工具中看到computed values（开发人员工具的样式标签末尾的可视化表示），则padding-top和bottom都相同。但您注意到的差异不是考虑文本的line-height。如果将鼠标悬停在开发人员工具中的元素上，您会看到文本周围的框在文本下方有一些空格。应用填充时的浏览器认为这是文本的一部分，并仅在此框周围应用填充。

Answer 2

嗨，你可以试试line-height：css for normal中的普通属性。

.btn-request-more-info {
    background: #fff;
    color: #6e2c91;
    font-size: 18px;
    padding: 10px 2.5em 10px;
    border: 1px solid #fff;
    font-weight: 900;
    text-transform: uppercase;
    border-radius: 10px;
    border: 1px solid #fff;
    line-height:normal;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}