0

I wanted to create a button component in React, but I have found that there is a small space between my anchor tag and the container element. I tried zooming in and out to see if that was the issue but I did not find a difference. The example below shows the problem.

.container {
    display: inline-block;
    margin: auto;
    text-align: center;
    border: 1px solid white;
}

.link {
    display: block;
    padding: 1.2rem 2rem;
    color: white;
    background-color: black;
    letter-spacing: 3px;
    transition: all 0.5s;
}

.container:hover {
    cursor: pointer;
    border: 2px solid red;
}
<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
      <div class="container">
           <a class="link">FOO</a>
      </div>
  </body>
</html>

This is what I see when I hover over it

Kidus Asmare Ayele
  • 93
  • 7
  • No, I am trying to remove the space between the container and the element contained not two elements next to each other. The code snippet shows the problem I am having. – Kidus Asmare Ayele Jan 11 '22 at 22:17
  • Isn't it just white 1px border that is set in `.container`? I don't see any other gap there – Bogdan Malizhev Jan 11 '22 at 22:20
  • 1
    What browser? I don't see the space you mention, though your `margin` and `text-align` on the container are redundant. – Chris W. Jan 11 '22 at 22:22
  • It's not clear what is the real problem. I think you may edit this question to be more specific. @KidusAsmareAyele – amlxv Jan 12 '22 at 00:29
  • @ChrisW. I'm using Chrome – Kidus Asmare Ayele Jan 12 '22 at 03:09
  • This is most likely a duplicate of this known issue: https://stackoverflow.com/questions/70182543/why-is-the-child-div-offset which I've already filed a bug for: https://bugs.chromium.org/p/chromium/issues/detail?id=1275530#c_ts1638360152 Unfortunately the developer responsible for the regression removed themselves as the owner of the ticket and prioritized it down. Looks like noone is going to work on it, so we'll have to live with it. Make yourself heard in the bug tracker to show the Chromium team that we need a fix. – connexo Jan 12 '22 at 03:19

0 Answers0