Why I prefer {" "} over mx-1 or ml-1 for spacing in TSX

A quick tip on handling spaces in TSX links and text for better copy-paste experience.

May 29, 2025 (16d ago)

The problem with relying on margin classes for spacing

When you add spacing between inline elements in TSX using classes like mx-1 or ml-1, the visual gap appears perfectly in the browser. But when someone copies the text, the space often doesn't get copied because it's just margin β€” not an actual space character.

That can lead to awkward text with missing spaces when pasted somewhere else.

The solution: explicit spaces with {" "}

Instead of relying solely on CSS margins for spacing between inline text or links, use explicit space characters in TSX:

<p>
  Feel free to reach out on{" "}
  <a href="/telegram" className="link">
    Telegram
  </a>{" "}
  or via email.
</p>

This way, the space is part of the text content, so it copies and pastes correctly every time.

Why this matters

It’s a small detail that improves user experience, especially if people copy your content or links from your site. It keeps the flow natural and avoids confusion or annoying formatting glitches.

Hope this helps you keep your text both pretty and practical!

Gradient background