How to Remove the Space Between Inline-block Elements

Removing the space between inline-block elements is one of the most commonly asked questions on the internet. A series of inline-block elements usually will have space in between them.

Tricks to Remove the Space Between Inline-Block Elements

We can solve this problem with the help of CSS properties. Also, some tricks can remove the space between inline-block elements.

Let’s discuss the following example and give it a solution.

  • Create a <ul> tag, which is used for specifying an unordered list. The <ul> tag is a block-level element. Create <li> tags. Each element of an unordered list is declared inside the <li> tag.
  • Use the :nth-child() pseudo-class so as to put style to the next two <li> tags.

Example of adding inline-block elements with space:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      li {
        display: inline-block;
        width: 150px;
        font-size: 20px;
        color: #eeeeee;
      }
      li:nth-child(1) {
        background: #1c87c9;
      }
      li:nth-child(2) {
        background: #666666;
      }
      li:nth-child(3) {
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </body>
</html>

Here, we see the space between the inline-block elements. So let’s remove the spaces using some techniques.

  1. The easiest way is to do the following:
<ul>
    <li>Item 1</li><li>Item 2</li><li>Item 3</li>
</ul>
  1. You can even skip certain closing tags entirely like this:
<ul>
  <li>Item 1
  <li>Item 2
  <li>Item 3
</ul>

Let’s see another way of removing spaces using the margin-right property. In the following example, we set the margin-right: -4px; which removes the spaces between our elements.

Example of removing the space between inline-block elements with the margin-right property:

<!DOCTYPE html>
<html>
  <head>
    <style>
      nav a {
        display: inline-block;
        background: #1c87c9;
        margin-right: -4px;
        color: white;
        font-weight: bold;
        text-decoration: none;
        font-size: 25px;
      }
    </style>
  </head>
  <body>
    <nav>
      <a href="#">W</a>
      <a href="#">3</a>
      <a href="#">docs</a>
    </nav>
  </body>
</html>

Result

Inline-block elements with space:
W 3 docs
Inline-block elements without space:
W 3 docs

We can achieve the same result by setting the font-size property to 0 for <nav>.

Example of removing the space between inline-block elements with the font-size property:

<!DOCTYPE html>
<html>
  <head>
    <style>
      nav {
        font-size: 0;
      }
      nav a {
        display: inline-block;
        background: #1c87c9;
        font-size: 25px;
        color: white;
        font-weight: bold;
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <nav>
      <a href="#">W</a>
      <a href="#">3</a>
      <a href="#">docs</a>
    </nav>
  </body>
</html>

We can remove spaces with Flexbox . Read the comments to know why we should use extensions with the display property.

Example of removing the space between inline-block elements with Flexbox:

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        display: -webkit-box;/* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box;/* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox;/* TWEENER - IE 10 */
        display: -webkit-flex;/* NEW - Chrome */
        display: flex;/* NEW, Spec - Opera 12.1, Firefox 20+ */
      }
      strong {
        display: inline-block;
        width: 150px;
        font-size: 20px;
        padding: 20px;
        color: #eeeeee;
        text-align: center;
      }
      strong:nth-child(1) {
        background: #1c87c9;
      }
      strong:nth-child(2) {
        background: #666666;
      }
      strong:nth-child(3) {
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Example of How to Remove the Space Between Inline-block Elements</h2>
    <div>
      <strong>Item 1</strong>
      <strong>Item 2</strong>
      <strong>Item 3</strong>
    </div>
  </body>
</html>

The CSS float property can also come to help.

Example of removing the space between inline-block elements with the float property:

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        clear: both;
        content: " ";
        display: table;
      }
      span {
        display: inline-block;
        width: 150px;
        font-size: 18px;
        padding: 10px 15px;
        text-align: center;
        color: #eeeeee;
        float: left;
      }
      span:nth-child(1) {
        background: #1c87c9;
      }
      span:nth-child(2) {
        background: #666666;
      }
      span:nth-child(3) {
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <div>
      <span>Item List1</span>
      <span>Item List2</span>
      <span>Item List3</span>
    </div>
    <p>Some text</p>
  </body>
</html>
Do you find this helpful?

Related articles