# Fix extra space after inline element

> 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.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2023-10-25 | Topics: [CSS](https://flaviocopes.com/tags/css/) | Canonical: https://flaviocopes.com/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:

```html
<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](https://flaviocopes.com/images/fix-extra-space-after-inline-element/1.webp)

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](https://flaviocopes.com/images/fix-extra-space-after-inline-element/2.webp)