Signup/Sign In

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

Answer: Using CSS margin property

The inline-block elements in HTML have some spaces between them for visual clarity. The spaces between the inline-block elements can be removed by using CSS property. There are multiple ways to do so.

In this tutorial, we will use various ways to remove space between inline-block.

Removing white-space between inline-block elements

We can use margin to remove the spaces between the elements. Set the negative value to the margin-right property. Here we have created an unordered list. It is a block-level inline element. We will remove space from the list elements.

Example: Remove space between inline elements using the margin property

Here, we have a simple example where we have added an unordered list and removed the space between them using the CSS margin property. We have added margin-right: -6px to remove the space between elements.

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
  ul li {
    display: inline-block;
	background: #ff2345;
	margin-right: -6px;
	  <li>item1 </li>
	  <li> item2  </li>
	  <li> item3  </li>
	  <li> item4  </li>


Here is the output of the above program.

remove space between inline block elements

Using font-size property

The other way to remove the space between inline-block elements is by using the CSS font-size property. Here we will take the nav elements to create an inline link with no space between them.

Example: Removing spaces between inline-block elements using the font-size property

Here in the example, we have used font-size: 25px; along with some other CSS properties. The font-size successfully removes the space between nav items.


The above examples are the simplest method to remove space between inline-block elements using CSS. You can choose either of the two methods to remove space.

About the author: