Css 停止在页面上向下移动其他元素的悬停效果

我正在进行导航，我添加了一个效果，当您将鼠标悬停在链接上时，底部会添加一个蓝色边框。这是可行的，但我唯一的问题是，当你将鼠标悬停在链接上时，边框会将页面上的所有其他元素向下推3像素（边框的大小）

如果有人能告诉我如何解决这个问题，我将不胜感激。以下是相关代码：

HTML

---

一个简单的修复方法是在元素未悬停时添加透明边框

添加

边框底部：3倍实心透明至
。站点导航a

.site-navigation a {
    font-family:'Arvo', serif, Georgia;
    width: 125px;
    float: left;
    padding: 50px 0 50px 0;
    letter-spacing: 4px;
    text-transform: uppercase;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s;
    color: rgb(82, 82, 82);
    border-bottom: 3px solid transparent;
}

如何添加以下CSS：

border-bottom: 3px solid transparent;

到

解决悬停问题的简单方法

<div class="main">
  <div class="box"></div>
</div>



.main{
        height: 205px;
        width: 405px;
    }
    .box{
        height: 200px;
        width: 400px;
        border:1px solid rgb(0, 0, 0);
        transition: 
        0.3s;
        
    }
    .box:hover{
        margin-left: 5px;
        margin-bottom: 5px;
        box-shadow: -5px 5px black;
    }


梅因先生{
身高：205px；
宽度：405px；
}
.盒子{
高度：200px；
宽度：400px；
边框：1px实心rgb（0,0,0）；
过渡：
0.3s；
}
.box:悬停{
左边距：5px；
边缘底部：5px；
盒影：-5px 5px黑色；
}
3px边框导致问题。在非悬停状态添加一个3px透明边框，以便快速修复。非常感谢。这看起来很简单，但我从没想过！请尝试为您的答案添加解释。
border-bottom: 3px solid transparent;

.site-navigation a

<div class="main">
  <div class="box"></div>
</div>



.main{
        height: 205px;
        width: 405px;
    }
    .box{
        height: 200px;
        width: 400px;
        border:1px solid rgb(0, 0, 0);
        transition: 
        0.3s;
        
    }
    .box:hover{
        margin-left: 5px;
        margin-bottom: 5px;
        box-shadow: -5px 5px black;
    }