Extra Space in my Link

[simple perch]

If you check out the attached image, you'll see a link with an extra underlined space at the end. I can't seem to make that extra space go away, and it is driving me nuts.

There are no spaces anywhere in my data. There are no spaces in the code. (I've got a screenshot showing whitespace rendering...)

---
// Import the books data from the JSON file
import books from '@data/books.json';

interface Book {
  title: string;
  author: string;
  link: string;
}
---

<!-- Define your component's HTML here -->
<div>
  <h1>Books</h1>
  <ul>
    {
      books.map((book: Book) => (
        <li>
          <strong>
            <a href={book.link.trim()} target="_blank" rel="noopener noreferrer">
              {book.title}
            </a>
          </strong>
          <span>by {book.author}</span>
        </li>
      ))
    }
  </ul>
</div>

I used View Source to check the actual HTML, and sure enough, there is a space in there (screenshot attached)

Very mysterious!

Can anyone tell me why this is happening?

[hidden hawk]

iirc from a past thread, display: inline-block is a solution for this case

[simple perch]

Hey, thanks for answering...

Do you mean like this?

<strong>
  <a href={book.link} target="_blank" rel="noopener noreferrer">
    <span style="display: inline-block">{book.title}</span>
  </a>
</strong>

[obtuse path]

Can I see your books.json?

You could also just use the .trim() method that you're already using on the link

[hidden hawk]

i meant on the anchor tag itself, not the span in this case

[mental vortex]

You can use display: inline-block as mentioned or you can remove the whitespace by formatting your code on a single line instead.

<a href={book.link.trim()} target="_blank" rel="noopener noreferrer">{book.title}</a>

[simple perch]

This worked!

<!-- Define your component's HTML here -->
<div>
  <h1>Books</h1>
  <ul>
    {
      books.map((book: Book) => (
        <li>
          <strong>
            <a href={book.link} target="_blank" rel="noopener noreferrer" style="display: inline-block">
              <span>{book.title}</span>
            </a>
          </strong>
          by {book.author}
        </li>
      ))
    }
  </ul>
</div>