How can i make a content be fixed when the margin of the content next to it is moving?

Question

So I'm doing my first project in HTML and CSS, and one of the tasks is to align 4 icons side by side (horizontally) and make them "grow" a little bit when I pass the mouse over it. The problem is, when a pass the mouse, the border grows - and to maintain the margin it pushes the other icons around, and I don't want to do that, I want only the one icon my cursor is over to move. I've been looking for a solution for 3 hours now and I can't find it. Hope this got clear. Here's my code in HTML and CSS:

.icones {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  border: solid #ffffff;
  box-sizing: content-box;
  height: 70px;
}

.icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin: 10px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
  border: solid red;
}

.icons a:hover {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 50%;
  padding: 15px;
}

<div class="icones">
  <div class="icons">
    <a href="http://" target="_blank">
      <ion-icon name="logo-github"></ion-icon>
    </a>
    <a href="http://" target="_blank">
      <ion-icon name="logo-whatsapp"></ion-icon>
    </a>
    <a href="http://" target="_blank">
      <ion-icon name="logo-instagram"></ion-icon>
    </a>
    <a href="http://" target="_blank">
      <ion-icon name="logo-discord"></ion-icon>
    </a>
  </div>
</div>

Answer 1

Just use scale on :hover (and transition for a nice animation).
Also, don't change padding or margin (btw, use gap instead) on hover.

.icons a {
  /* Default styles here ... */
  transition: scale 0.3s;
}

.icons a:hover {
  /* Hover styles here ... */
  scale: 1.5;
}

Example:

.icons {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  gap: 1rem; /* instead of margin */
}

.icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
  border: solid red;
  text-decoration: none;
  
  transition: scale 0.3s, border-radius 0.3s;
}

.icons a:hover {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 50%;
  
  scale: 1.5;
}

<div class="icons">
  <a href="http://" target="_blank">🌞</a>
  <a href="http://" target="_blank">🤓</a>
  <a href="http://" target="_blank">🚀</a>
  <a href="http://" target="_blank">❤️</a>
</div>