Link 与 child 大小不同

Question

这是我通过 Tab 键突出显示的 A 标签

问题：

为什么右边有个奇怪的space？我该如何修复它但布局保持不变？

代码：

#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/322699372443729931/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>

上下文：

我将行显示设置为 block 因为 Edge 否则将其设置为 flex 然后所有 link 不是并排而是彼此下方

和display: block

没有display: block即使有flex-direction: row

我将颜色设置为 transparent 因为否则图像会留下一条蓝线（我认为已访问 link）

Github: HTML CSS

Answer 1

这是您要找的吗？

我会 display: flex 在行上，然后 display: block 在锚点上。

此外，outline: 0 应该去掉蓝色轮廓。

[编辑]

我使用了你的 HTML 和 CSS，发现 `.row>* { width: 100% } 是罪魁祸首。

添加以下内容可以解决您的问题，我相信：

#servers a {
  width: auto;
}

:root {
  --scrollbar-color: #909090;
  --scrollbar-hover: #606060;
  --background: var(--bs-gray-dark);
  --text: #fff;
  --list-item: var(--bs-gray);
  --text-secondary: #6c757d !important;
}

@media (prefers-color-scheme: light) {
  :root {
    --background: var(--bs-white);
    --text: #000;
    --list-item: var(--bs-light);
  }
}

body {
  background: var(--background);
  color: var(--text);
  overflow-x: hidden;
}

var {
  color: var(--text);
}

.column {
  float: left;
  padding-left: 5px;
}

#usermenu::after {
  content: "";
  clear: both;
  display: table;
}

.dropdown-item,
.dropdown-menu {
  background-color: var(--text-secondary);
  color: var(--text);
}

@media (min-width: 991.98px) {
  main {
    padding-left: 240px;
  }
}

.list-group-item {
  background-color: var(--list-item);
}

/* Sidebar */
.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  padding: 58px 0 0;

  /* Height of navbar */
  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 5%), 0 2px 10px 0 rgb(0 0 0 / 5%);
  width: 240px;
  z-index: 600;
}

@media (max-width: 991.98px) {
  .sidebar {
    width: 100%;
  }
}

.sidebar .active {
  border-radius: 5px;
  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
}

.sidebar-sticky {
  position: relative;
  top: 0;
  height: calc(100vh - 48px);
  padding-top: 0.5rem;
  overflow-x: hidden;
  overflow-y: auto;
}

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

#servers a {
  margin: 10px;
  color: transparent;

  /* display: block; */
  padding: 0;
}

.row {
  display: block;
}

.grayscale {
  filter: grayscale(100%) blur(0.5px) opacity(50%);
}

@media only screen and (min-width: 600px) {
  ::-webkit-scrollbar {
    width: 16px;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border-width: 4px;
    border-color: transparent;
    border-style: solid;
    background-clip: content-box;
    background-color: var(--scrollbar-color);
  }

  ::-webkit-scrollbar-thumb:hover {
    border-radius: 8px;
    border-width: 4px;
    border-color: transparent;
    border-style: solid;
    background-clip: content-box;
    background-color: var(--scrollbar-hover);
  }
}

#servers a {
  width: auto;
}

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Servers | Discord Music Bot</title>
  <link rel="shortcut icon" type="image/gif" href="/Music.gif">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css"
    integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/fontawesome.min.css" />
</head>

<body>
  <section class="main">
    <header>
      <!-- Navbar -->
      <nav id="main-navbar" class="navbar navbar-expand-lg navbar-light fixed-top">
        <!-- Container wrapper -->
        <div class="container-fluid">
          <!-- Toggle button -->
          <button class="navbar-toggler" type="button" data-mdb-toggle="collapse" data-mdb-target="#sidebarMenu"
            aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation"
            onclick="function re(){ let r = $('#sidebarMenu'); if(r.hasClass('collapse'))r.removeClass('collapse');else r.addClass('collapse')}re()">
            <i class="fas fa-bars"></i>
          </button>

          <!-- Brand -->
          <a class="navbar-brand" href="/">
            <img src="/Music.gif" height="40" alt="" loading="lazy" />
            <var>WEB.SERVERS.SERVERS</var>
          </a>
          <div>
            <h1 class="server-name"></h1>
          </div>
          <div id="usermenu" class="dropdown">
            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
              <div class="column">
                <img id="usericon" src="" width="25"></img>
              </div>
              <div class="column">
                <h4 id="username"></h4>
              </div>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
              <li><a class="dropdown-item" href="/logout"><var>WEB.SIDE.LOGOUT</var></a></li>
            </ul>
          </div>
        </div>
      </nav>
      <!-- Navbar -->
      
      <!-- Sidebar -->
      <nav id="sidebarMenu" class="collapse d-lg-block sidebar collapse">
        <div class="position-sticky">
          <div class="list-group list-group-flush mx-3 mt-4">
            <a href="/dashboard" class="list-group-item list-group-item-action py-2 ripple" aria-current="true">
              <i class="fas fa-tachometer-alt fa-fw me-3"></i><span><var>WEB.SIDE.DASHBOARD</var></span>
            </a>
            <a href="/servers" class="list-group-item list-group-item-action py-2 ripple active">
              <i class="fas fa-server fa-fw me-3"></i><span><var>WEB.SIDE.SERVERS</var></span>
            </a>
          </div>
        </div>
      </nav>
      <!-- Sidebar -->
    </header>
    <main style="margin-top: 58px;">
      <div class="container pt-4">
        <section>
          <h1><var>WEB.SERVERS.SELECT</var></h1>
          <div id="servers" class="row">
            <a href="#">
              <img class="server-censored" width="60" height="60" src="https://cdn.discordapp.com/icons/322699372443729931/302e4cc925c9f18d6f3e36a8499e1c1d.png" alt="censored">
            </a>

            <a href="#">
              <img class="server-censored" width="60" height="60" src="https://i.imgur.com/fFReq20.png" alt="censored">
            </a>
          </div>
        </section>
      </div>
    </main>
  </section>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous">
  </script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</body>

Link 与 child 大小不同

Link is not the same size as child

html

css

hyperlink

flexbox

问题：

代码：

上下文：