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

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:0.5em 2em。

填充差异(我使用标尺直观地显示了填充分布的差异)。

上面的填充:

下方填充:

我以前遇到过很多次这个问题，但一直没有找到解决办法。为什么会发生这种情况？

Answer 1

这可能是因为 css 的 line-height 属性。如果您在 padding-top 和 bottom 中看到 computed values(在开发人员工具样式选项卡末尾显示的视觉表示)是一样的。但是您注意到的不同之处在于没有考虑文本的 line-height。如果您将鼠标悬停在开发人员工具中的元素上，您会看到文本周围的框在文本下方有一些空间。浏览器在应用填充时将其视为文本的一部分，并仅在此框周围应用填充。