HTML – The link is not child-sized

  • Home / Blog / HTML – The…

HTML – The link is not child-sized

This is my A Tag highlighted via tabbing

Question:

Why is there a strange place on the right? How can I fix this 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="https://stackoverflow.com/servers/censored">
    <img class="server-censored" width="60" height="60" src="https://cdn.discordapp.com/icons/322699372443729931/302e4cc925c9f18d6f3e36a8499e1c1d.png" alt="censored">
  </a>

  <a href="https://stackoverflow.com/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 block Because Edge sets it otherwise flex And then all the links are below each other, not with each other

with display: block
With display block

Without display: block Even with flex-direction: row
Without display block

I set the color transparent Because otherwise there is a blue line left for the icon (see link I think)

GitHub: HTML CSS

Write a Comment

Your email address will not be published. Required fields are marked *

x