How to remove the space below a link?

Most often the space comes from an image inside the link. Images are inline by default, so they sit on the text baseline and leave room below it for letters like g and y. Make the image a block:

.logo img {
  display: block;
}

There are three common causes in total. Inspect the link in DevTools, check which box is taller than you expect, and pick the matching fix.

1. An image inside a link

<a class="logo" href="/">
  <img src="/logo.svg" alt="Home" width="120" height="32">
</a>

The gap is the space a line of text reserves for descenders, the parts of letters that hang below the baseline. The link wraps the inline image, so the link includes that gap too. display: block takes the image out of the line, so nothing is reserved. If the image has to stay inline, vertical-align: middle or vertical-align: top removes the gap as well. There's more detail in extra space below image.

If the link sits in normal text flow, and not in a flex or grid container, make the link a block too, so its box is the size of the image. width: fit-content stops the clickable area from stretching across the whole row:

.logo {
  display: block;
  width: fit-content;
}

2. The underline is too far from the text

If the space you mean is between the text and its underline, you don't have to remove the underline. Control it directly:

a {
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}

text-underline-offset moves the underline closer to the text or further away, and text-decoration-thickness sets how heavy it is. Both work in all modern browsers.

If the underline is faked with border-bottom and padding-bottom, that padding is your extra space. Replace it with the two properties above. text-decoration: none removes the underline completely, but links inside paragraphs then need another cue besides color, so people who can't tell the colors apart still find them.

3. Vertical padding on an inline link

/* The background grows, but the lines around it don't move */
.tag {
  padding: 6px 12px;
  background: #eef2ff;
}

Links are inline elements. Vertical padding on an inline element paints the background bigger, but it doesn't take up any space in the line. The padded background overlaps the lines above and below, and the parent's height ignores it, which looks like odd spacing. Make the link inline-block so the padding counts:

.tag {
  display: inline-block;
  padding: 6px 12px;
  background: #eef2ff;
}

Links in a row: use flex and gap

Several inline-block links next to each other bring two more problems. The line breaks between them in the HTML show up as spaces, so the gaps are a few pixels wider than your margin. And they line up on the text baseline, so items with an icon or a different font size don't align and the row can end up taller than expected.

A flex parent fixes both, and gap gives you exact spacing:

<nav class="tags">
  <a class="tag" href="/tags/css">CSS</a>
  <a class="tag" href="/tags/html">HTML</a>
  <a class="tag" href="/tags/react">React</a>
</nav>

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

Flex items ignore the whitespace between them and don't sit on a shared text baseline by default. The links also become flex items, so their vertical padding works without inline-block.