I have a button and a , they must be the same size. If the text is long enough, then everything is in order, but if short, then the dimensions are different. Tell me why this is happening and how can this be fixed?

 .button { display: inline-flex; align-items: center; flex-direction: row; justify-content: center; min-width: 60px; height: 40px; padding: 0 20px; color: #FFC0CB; border: none; border-radius: 3px; background: gray; font-size: 13px; font-family: sans-serif; text-decoration: none; outline: none; cursor: pointer; } 
 <div class="main-block"> <div> <p>Короткий текст</p> <button class="button"> <span>Да</span> </button> <a href="#" class="button"> <span>Да</span> </a> </div> <div> <p>Средний текст</p> <button class="button"> <span>Сохранить</span> </button> <a href="#" class="button"> <span>Сохранить</span> </a> </div> </div>

    1 answer 1

    For the button browser defaults to the box-sizing: border-box; property box-sizing: border-box; . Modify it or add a to the tag.