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!