How to remove the space between inline or inline-block elements with CSS?

Sometimes, we want to remove the space between inline or inline-block elements with CSS.
We’ll look at how to remove the space between inline or inline-block elements with CSS, in this article.

How to remove the space between inline or inline-block elements with CSS?

We use the flexbox, To remove the space between inline or inline-block elements with CSS .
For instance, we can write

<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

to add a p element with 2 spans.

Then we style them by writing

p {
  display: flex;
}

span {
  width: 100px;
  font-size: 30px;
  color: white;
  text-align: center;
}

We make the p element with display: flex with a flex container.
This will also remove the space between the child elements, which are the spans.
Then by changing the font size, color, and alignment, we style the span’s text.

Conclusion

Lastly we can use flexbox, to remove the space between inline or inline-block elements with CSS.