Сверстал 2 кнопки, одна простая, вторая с иконкой. Проблема заключается в том, что обе кнопки не находятся на одной высоте, кнопка с иконкой опустилась на пару пикселей ниже. В чем проблема и как быть?
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.container {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.link {
background: lightgray;
display: inline-flex;
font-size: 5rem;
border: 1px solid;
}
.link__icon {
padding: 10px 20px;
line-height: inherit!important;
background: azure;
}
.link__text {
padding: 10px 20px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
<div class="container">
<div class="container__inner">
<a class="link">
<span class="link__text">Текст</span>
</a>
<a class="link">
<i class="link__icon far fa-smile"></i>
<span class="link__text">Текст</span>
</a>
</div>
</div