Link is not the same size as child

Link Highlighted

This is my A Tag highlighted through tabbing

Question:

why is there a weird space on the right side? How can i fix it but the layout stays the same?

Code:

#servers img {
  border-radius: 50%;
}

#servers a {
  margin: 10px;
  color: transparent;
  padding: 0;
}

.row {
  display: block;
}
<div id="servers" class="row">
  <a href="/servers/censored">
    <img class="server-censored" width="60" height="60" src="https://cdn.discordapp.com/icons/censored/302e4cc925c9f18d6f3e36a8499e1c1d.png" alt="censored">
  </a>

  <a href="/servers/censored">
    <img class="server-censored" width="60" height="60" src="https://i.imgur.com/fFReq20.png" alt="censored">
  </a>
</div>

Context:

I set the row display to block because Edge otherwise sets it to flex and then all the links are not side by side but beneath each other

with display: block with display block

without display: block even with flex-direction: row without display block

Github: HTML CSS



Read more here: https://stackoverflow.com/questions/68459255/link-is-not-the-same-size-as-child

Content Attribution

This content was originally published by kaaaxcreators at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: