なぜ私のアンカーは送信ボタンと異なるスタイルになっていますか？

Question

同じスタイルで、同じクラス名で送信ボタンとアンカーリンクを作成しました。しかし結果は異なります。私のアンカーリンクは私の送信ボタンよりも大きいです。この

のようにここでスニペットそれは同じ大きさを持つようにする方法

.btn { 
 
    display: inline-block; 
 
    background: red; 
 
    margin:10px; 
 
    padding: 13px 30px; 
 
    border:none; 
 
    border-radius: 4px !important; 
 
    box-shadow: 0 4px 0 0 blue; 
 
    
 
    color: #fff; 
 
    font-size: 18px; 
 
    text-transform: uppercase; 
 
}

<input type="submit" value="Login" class="btn"> 
 
<a href="" class="btn">Login</a>

ですか？高さを正確にpxに設定したり、要素の線の高さを設定する必要はありません。おかげjsfiddleまたはsippetに事前に

は、同じスタイルを持っていますが、私が作成し、ローカルのブラウザ上で実行すると、.btnクラスでline-heightを設定別物

Answer 1

は彼らが均等に背が高くなりますと言っています。

.btn { 
 
    line-height: 1em; 
 
    display: inline-block; 
 
    background: red; 
 
    margin:10px; 
 
    padding: 13px 30px; 
 
    border:none; 
 
    border-radius: 4px !important; 
 
    box-shadow: 0 4px 0 0 blue; 
 
    
 
    color: #fff; 
 
    font-size: 18px; 
 
    text-transform: uppercase; 
 
}

<input type="submit" value="Login" class="btn"> 
 
<a href="" class="btn">Login</a>