Почему у моего анкера есть другой стиль с моей кнопкой отправки?

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 или гренок имеют одинаковый стиль, но когда я создать и запустить на локальном браузере это говорят разные вещи

Answer 1

установив line-height в .btn класса делает их одинаково высокий.

.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>