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

Question

我有一个问题，应用于元素的类样式的呈现方式会有所不同，具体取决于它是应用于锚标记还是按钮。

我的班级'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);
   }

当应用于锚标记时，它按预期呈现;

但是当应用于按钮时，它给按钮提供了看似更大的线高，文本位于底部;

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

有谁知道这里发生了什么？如何使按钮和锚标签以相同的方式呈现？

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>

似乎自己几乎没有工作 - 只有几个像素关闭？