CSS变换的规模也增加了div父体

Question

悬停在锚点链接上时，使用转换比例属性格式化锚点链接时遇到问题。

我在一个div中有一个链接(该div用于将链接指向右侧(，当我悬停在它上面时，我想放大它。然而，当我这样做时，它也会增加父div的主体大小，从而移动页面上的所有其他元素。为什么会发生这种情况？据我所知，规模不应该影响元素的大小，尤其是它的父元素。

你能告诉我哪里错了吗。我对html和css还很陌生，所以也许我完全设置了糟糕的代码。

感谢任何能帮助我的人。

a#fonte1 {
font-size: 1rem !important;
font-weight: 300 !important;
transition: transform 0.2s ease !important;
display: inline-block !important;
}
a#fonte1:hover {
transform: scale(1.2) !important;
cursor: pointer !important;
color: rgb(13,89,253) !important;
border: 1px solid rgb(13,89,253) !important;
border-radius: 0.3rem !important;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<section class="showcase border-bottom">
<div class="container-fluid p-0">
<div class="row g-0">
<div class="col-lg-6 order-lg-2">
...
</div>  
<div class="col-lg-6 order-lg-1 ">
<h2>[title 1]</h2>
<p class="mb-0" style = "text-align: justify">
...
</p>
<div style="text-align:right;">
<a id="fonte1" href="#">
Link
</a>
</div>
</div>
</div>
<div class="row g-0">
<div class="col-lg-6 ">
...
</div>
<div class="col-lg-6 ">
<h2>[title 2]</h2>
<p class="mb-0" style = "text-align: justify">
...
</p>
</div>
</div>
</div>
</section>

Answer 1

您在悬停时添加了一个边框，它会更改元素的大小。在基本状态上添加透明边框，并在悬停时更改其颜色。

a#fonte1 {
font-size: 1rem;
font-weight: 300;
transition: transform 0.2s ease;
display: inline-block;
border: 1px solid transparent;
}
a#fonte1:hover {
transform: scale(1.2);
cursor: pointer;
color: rgb(13, 89, 253);
border: 1px solid rgb(13, 89, 253);
border-radius: 0.3rem;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<section class="showcase border-bottom">
<div class="container-fluid p-0">
<div class="row g-0">
<div class="col-lg-6 order-lg-2">
...
</div>
<div class="col-lg-6 order-lg-1 ">
<h2>[title 1]</h2>
<p class="mb-0" style="text-align: justify">
...
</p>
<div style="text-align:right;">
<a id="fonte1" href="#">
Link
</a>
</div>
</div>
</div>
<div class="row g-0">
<div class="col-lg-6 ">
...
</div>
<div class="col-lg-6 ">
<h2>[title 2]</h2>
<p class="mb-0" style="text-align: justify">
...
</p>
</div>
</div>
</div>
</section>