CSS:按钮文本位于看似大于定义行高的底部

Question

我遇到了一个问题，即应用于元素的类样式呈现不同，具体取决于它是应用于 anchor 标记还是按钮。

我的类(class)，'btn'定义如下；

.btn {
    background:transparent;
    border:2px solid #FFF;
    padding: 18px 30px 18px;
    line-height:1.7em;
    max-width:100%;
    white-space:normal;
    margin-top:25px;
    border-radius:100px;
    text-transform: uppercase;
    letter-spacing:0.1em;
    font-weight:bold;
    color:#FFF;
    text-decoration:none;
    transition:all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   }

当应用于 anchor 标记时，它会按预期呈现；

但是当应用于按钮时，它会为按钮提供看似更大的行高，文本位于底部；

我已经尝试在 css 文件的开头重置按钮的行高，但这没有帮助。

有人知道这是怎么回事吗？如何使按钮和 anchor 标记以相同的方式呈现？

Answer 1

body{background:#666;}

.btn {
    background:transparent;
    border:2px solid #FFF;
    padding: 18px 30px 18px;
    line-height:1.7em;
    max-width:100%;
    white-space:normal;
    margin-top:25px;
    border-radius:100px;
    text-transform: uppercase;
    letter-spacing:0.1em;
    font-weight:bold;
    color:#FFF;
    text-decoration:none;
    transition:all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   }

<a class="btn">Download brochure</a>

<button type="button" class="btn">Download brochure</button>

似乎自己几乎可以正常工作 - 只差几个像素？