How to Remove Space Between inline-block Elements in CSS

By the end of this page, you will understand why gaps appear between inline and inline-block elements, how browsers treat HTML whitespace, and which CSS techniques can remove or avoid that spacing. You will also learn the trade-offs of each approach and when a layout method like Flexbox is a better choice.

inline-block elements participate in inline layout. That means the browser places them similarly to words in a sentence. In HTML, spaces, tabs, and line breaks between inline-level elements are treated as text whitespace. That whitespace is rendered just like the space between words.

So in code like this:

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

there is a newline and indentation between the tags. The browser collapses that into a single visible space. Because the elements are inline-block, that space appears as a small gap between them.

This matters because developers often use inline-block for:

• horizontal navigation items
• button groups
• image grids
• small card layouts

If you do not understand that the gap comes from HTML whitespace in inline formatting, the layout can feel inconsistent or broken.

A CSS-only solution usually works by changing how the whitespace is measured or by using a different layout system entirely.

Common approaches include:

• setting the parent font-size to 0
• using a small negative margin
• switching to Flexbox or Grid when appropriate

The key idea is this:

Think of inline-block elements as words in a sentence.

If you write:

Foo Bar

there is a visible space between Foo and Bar because you typed one. The same thing happens with inline-block elements. The browser sees whitespace between the tags and lays it out like a word space.

So this:

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

acts a bit like:

[Foo] [Bar]

To remove the gap, you can:

• remove the space from the source
• make the space take up no width with CSS
• use a layout model that does not treat items like words, such as Flexbox

A useful mental shortcut:

• inline-block = box that still behaves like text in a line
• block = box on its own line
• flex = box arranged by layout rules, not text spacing

Basic example that creates the gap

<p class="wrapper">
  <span>Foo</span>
  <span>Bar</span>
</p>

.wrapper span {
  display: inline-block;
  width: 100px;
  background: palevioletred;
}

The space between the two span tags is rendered as visible whitespace.

CSS solution 1: font-size: 0 on the parent

<p class="wrapper">
  <span>Foo</span>
  <span>Bar</span>
</p>

Example

<p class="wrapper">
  <span>A</span>
  <span>B</span>
</p>

.wrapper {
  font-size: 0;
}

.wrapper span {
  display: inline-block;
  width: 60px;
  font-size: 16px;
  background: orange;
}

What happens step by step

1. The browser reads the HTML and finds two span elements inside a p.
2. There is whitespace between </span> and <span> in the source code.
3. Because span elements are participating in inline layout, that whitespace is treated like a normal text space.
4. The parent .wrapper has , so any text whitespace inside it has zero width.

Where this comes up in practice

Navigation menus

Horizontal menu items built with inline-block can show tiny unwanted gaps.

Button groups

Adjacent buttons may look uneven if whitespace creates extra spacing.

Thumbnail galleries

Small gaps between image tiles can break exact alignment.

Tag or badge lists

Pills or labels laid out in a row may appear misaligned if the whitespace is not intentional.

Legacy codebases

Older projects often use inline-block instead of Flexbox. Knowing how to handle whitespace helps when maintaining those systems.

Example: button group

<div class="buttons">
  <button>Save</button>
  <button>Cancel</button>
</div>

.buttons {
  font-size: 0;
}

.buttons button {
  : inline-block;
  : ;
}

In real projects, developers usually choose one of these patterns:

1. Use Flexbox for layout

This is the most common modern choice.

.toolbar {
  display: flex;
  align-items: center;
}

Why developers prefer it:

• no whitespace gap issue
• easier alignment
• built-in spacing with gap
• better control for responsive layouts

2. Use font-size: 0 for legacy inline-block layouts

This is common when updating older code without changing markup.

.list {
  font-size: 0;
}

.list-item {
  display: inline-block;
  font-size: 14px;
}

This is useful when:

• markup cannot be changed
• layout must stay inline-block
• you need a quick CSS-only fix

3. Add intentional spacing explicitly

Instead of relying on HTML whitespace, developers often control spacing directly.

1. Thinking the gap is a margin

Beginners often assume the browser added margin to span elements.

span {
  display: inline-block;
  margin: 0;
}

This does not remove the gap, because the gap is whitespace, not margin.

2. Setting font-size: 0 and forgetting to restore child text size

Broken example:

.wrapper {
  font-size: 0;
}

.wrapper span {
  display: inline-block;
}

Now the text inside the spans may appear at zero size.

Fix:

.wrapper span {
  display: inline-block;
  font-size: 16px;
}

3. Using a hardcoded negative margin everywhere

span {
  margin-right: -4px;
}

Quick fix for inline-block gap

.parent {
  font-size: 0;
}

.parent > * {
  display: inline-block;
  font-size: 16px;
}

Why the gap happens

• Whitespace between inline-level elements is rendered like text space.
• inline-block still participates in inline layout.
• The gap is not a margin.

Common solutions

1. Parent font-size: 0

.parent { font-size: 0; }
.child  { font-size: 16px; }

2. Negative margin

.child { margin-right: -4px; }

Use with caution.

3. Flexbox

.parent { : flex; }

Why is there space between inline-block elements?

Because whitespace in the HTML source is rendered in inline layout, similar to the space between words.

Is the gap always exactly 4px?

No. It is often around 4px in common setups, but the actual width depends on the font, font size, and rendering.

What is the best CSS-only fix for inline-block gaps?

If you must keep inline-block, use font-size: 0 on the parent and restore the font size on the children.

Why does margin: 0 not remove the gap?

Because the gap is not margin. It is rendered whitespace from the HTML.

Should I use Flexbox instead of inline-block?

Usually yes, if you are building a layout. Flexbox is more predictable and easier to control.

Does this affect inline elements too?

Yes. Inline elements also render source whitespace between them.

Can I solve this without changing the HTML?

Yes. font-size: 0 is the most common CSS-only solution. Flexbox is often a better redesign if possible.

• Inline formatting context — Explains how inline and inline-block elements are laid out like text.
• Whitespace in HTML — Helps you understand why spaces and newlines can affect rendering.
• display property — Important for understanding the difference between inline, block, inline-block, and flex.
• Flexbox — A modern layout system that avoids this whitespace problem.
• CSS Grid — Another layout option when you need structured rows and columns.
• Margin vs padding — Useful because beginners often confuse whitespace gaps with margins.
• Font size inheritance — Important when using font-size: 0 on a parent.
• Vertical alignment — Often appears alongside inline-block layout issues.