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>

看起来自己可以正常工作-仅关闭几个像素？