I encountered an issue where I have created a submit button and anchor link with the same class name and style, but they are displaying differently. The anchor link appears to be larger than the submit button. You can see the difference in size here:
https://i.sstatic.net/AH3rH.jpg
Below is the code snippet:
.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>If you know how to make them the same size without specifying the height in pixels or setting the line height of the element, your help would be greatly appreciated. Thank you.
In the JSFiddle or CodePen demo, both elements have the same style. However, when I run the code on my local browser, the discrepancy in size becomes apparent.