You have a problem

When you use two inline elements on the same nesting level, HTML creates some visual space on the screen (4px space, to be clear).

Like this:

And you want to remove space (gap) between two inline or inline-block elements.

Here's how to do it.

Solution #1

The most simple solution is to write inline elements in one line.

Example:

<p>
  <span>Nick</span><span>Bull</span>
</p>

Result:

Solution #2

The next solution is to use font-size property.

Add font-size: 0 to the parent element, and then declare a sensible font-size on the children.

Example:

<p>
  <span>Nick</span>
  <span>Bull</span>
</p>

p {
  font-size: 0;
}

span {
  display: inline-block;
  width: 75px;
  background-color: green;
  font-size: 16px;
}

Result:

Solution #3

Add display: flex; to the parent element.

Example:

p {
  display: flex;
}

span {
  display: inline-block;
  width: 75px;
  background-color: green;
}

Result:

In the end...

Hope you found these solutions useful for you!

I share a lot of useful HTML and JavaScript tips on Twitter, if you want to upgrade your skills don't forget to follow me (or just to say Hi)

And also, every week I send out a "3–2–1" newsletter with 3 tech news, 2 articles, and 1 piece of advice for you.

📌 Subscribe to my 3–2–1 newsletter here 📌