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:

• The gap is not a margin added by the browser to inline-block.
• The gap is rendered whitespace from the HTML source.
• CSS can suppress or offset that effect, but some methods are more reliable than others.

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>

.wrapper {
  font-size: 0;
}

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

Why it works

The whitespace between the inline-block elements is text spacing. Setting the parent's font-size to 0 makes that whitespace take up no width.

Important note

You usually need to restore a normal font-size on the child elements, otherwise their text will also be invisible or tiny.

CSS solution 2: negative margin

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

This can visually pull elements together, but it is less reliable because the actual width of the whitespace depends on the font and browser rendering.

Better modern solution: Flexbox

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

.wrapper {
  display: flex;
}

.wrapper span {
  width: 100px;
  background: palevioletred;
}

Flexbox does not treat child spacing as text whitespace, so there is no unwanted gap from the HTML source.

If you specifically need inline-block, use font-size: 0. If you are building layout, prefer Flexbox.

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 font-size: 0, so any text whitespace inside it has zero width.
5. Each span is inline-block, so it still sits next to the others horizontally.
6. Each child span restores its own text size with font-size: 16px.
7. Result: the boxes appear side by side with no visible gap.

Without font-size: 0

If you remove this line:

font-size: 0;

the whitespace between the elements will once again take up horizontal space, producing the visible gap.

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 {
  display: inline-block;
  font-size: 14px;
}

This removes the accidental gap while keeping the buttons on one line.

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.

.nav {
  display: flex;
  gap: 8px;
}

This makes spacing predictable.

Related codebase patterns

Guard against accidental text effects

If you use font-size: 0 on a parent, always restore text styles on children.

Prefer explicit layout systems

For components, Flexbox or Grid is usually easier to maintain than inline-block hacks.

Use utility classes carefully

Some codebases create utility classes like:

.no-inline-gap {
  font-size: 0;
}

This can be useful, but it should be documented so other developers know why child text sizes must be reset.

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;
}

This may work in one browser or font size and fail in another. It is a workaround, not a robust solution.

4. Using inline-block for full layout when Flexbox is better

If the goal is horizontal alignment, spacing, wrapping, or centering, display: flex is usually simpler and clearer.

5. Removing all whitespace assumptions without testing

Whitespace rendering can vary depending on:

• font
• font size
• browser
• zoom level

So if you use tricks like negative margin, test carefully.

6. Forgetting that inline and inline-block both participate in inline formatting

This issue is not unique to inline-block. Inline-level elements are affected by source whitespace too.

inline-block vs Flexbox

font-size: 0 vs negative margin

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 { display: flex; }

Best modern option for layout.

Rules to remember

• If you must keep inline-block, use font-size: 0.
• If you are creating layout, prefer Flexbox.
• Restore child text styles after font-size: 0.
• Do not assume the gap is always exactly 4px.

Safe pattern

.container {
  font-size: 0;
}

.container .item {
  display: inline-block;
  font-size: 14px;
  vertical-align: top;
}

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.