Fix extra space after inline element

Let me write this because I’m going to forget.

I was designing a page and hit a problem, I had this markup:

<span class='mr-2 px-0.5 py-0 rounded-sm 
  text-sm font-bold text-black bg-yellow-400'>
  DEMO
</span>

Problem was, I had an extra space on the right of the span element:

Prettier autoformatter made the tag content go on its own line, and I didn’t want to fight that.

In this specific layout, setting the element to display: inline-block by adding Tailwind’s inline-block class changed how the whitespace was laid out.

Problem solved:

This is not a general fix for whitespace between inline elements. HTML whitespace is text, and newlines between inline tags normally collapse to one visible space. If that space is unwanted, remove the whitespace in the markup or control the layout with Flexbox or Grid. Changing an inline element to inline-block also changes its layout behavior, so use it only when that behavior is intended.

Want me to talk about your product? You can sponsor this site.