Fix extra space after inline element

Oct 25, 2023

Learn how to fix the extra space that appears after an inline element like a span when Prettier reformats it, by setting the element to display inline-block.

~~~

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:

Yellow DEMO badges with unwanted extra space after them, highlighted by arrow pointing to the gap

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

To fix this, I set the element to be display: inline-block by adding the inline-block Tailwind CSS class.

Problem solved:

Yellow DEMO badges properly aligned without extra space after applying inline-block display

Tagged: CSS · All topics

~~~