Remove whitespace between inline-block elements using CSS

avatar
Borislav Hadzhiev

Last updated: Apr 5, 2024
4 min

banner

# Table of Contents

  1. Remove whitespace between inline-block elements using CSS
  2. Remove whitespace between inline-block elements by setting font-size to 0
  3. Removing the whitespace between elements by using comments

# Remove whitespace between inline-block elements using CSS

When the display CSS property of multiple elements next to one another is set to inline-block, there is still space between the elements.

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <style>
      #box p {
        display: inline-block;
        background-color: lightgreen;
        padding: 2px 5px;
      }
    </style>
  </head>

  <body>
    <div id="box">
      <p>bobby</p>
      <p>hadz</p>
      <p>com</p>
    </div>
  </body>
</html>

whitespace between inline block elements

The code for this article is available on GitHub

If you need to remove the whitespace between the elements, set the display property of the container element to flex.

When the parent element's display property is set to flex, the whitespace between the elements is removed.

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <style>
      #box {
        display: flex;
      }

      #box p {
        display: inline-block;
        background-color: lightgreen;
      }
    </style>
  </head>

  <body>
    <div id="box">
      <p>bobby</p>
      <p>hadz</p>
      <p>com</p>
    </div>
  </body>
</html>

set display property on wrapper to flex

The code for this article is available on GitHub

You can wrap the elements in a div and set the display property on the div to flex.

The default flex-direction is row, but you can also set the property explicitly.

style.css
#box {
  display: flex;
  flex-direction: row;
}

#box p {
  display: inline-block;
  background-color: lightgreen;
}

Now there is no whitespace between the inline-block elements.

This also works with images and any other elements.

Here is an example without setting the display property to flex on the container div.

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <style>
      #box img {
        display: inline-block;
        width: 300px;
        height: 150px;
      }
    </style>
  </head>

  <body>
    <div id="box">
      <img
        src="https://bobbyhadz.com/images/blog/include-css-file-in-express-and-node-js/thumbnail.webp"
      />
      <img
        src="https://bobbyhadz.com/images/blog/include-css-file-in-express-and-node-js/thumbnail.webp"
      />
      <img
        src="https://bobbyhadz.com/images/blog/include-css-file-in-express-and-node-js/thumbnail.webp"
      />
    </div>
  </body>
</html>

inline block images with whitespace

The code for this article is available on GitHub

Notice that there is whitespace between the images.

The following example removes the whitespace by setting display to flex on the wrapper div.

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <style>
      #box {
        display: flex;
      }

      #box img {
        display: inline-block;
        width: 300px;
        height: 150px;
      }
    </style>
  </head>

  <body>
    <div id="box">
      <img
        src="https://bobbyhadz.com/images/blog/include-css-file-in-express-and-node-js/thumbnail.webp"
      />
      <img
        src="https://bobbyhadz.com/images/blog/include-css-file-in-express-and-node-js/thumbnail.webp"
      />
      <img
        src="https://bobbyhadz.com/images/blog/include-css-file-in-express-and-node-js/thumbnail.webp"
      />
    </div>
  </body>
</html>

inline block elements without whitespace

The code for this article is available on GitHub

# Remove whitespace between inline-block elements by setting font-size to 0

You can also remove the whitespace between inline-block elements by setting the font-size CSS property to 0 on the wrapper div.

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <style>
      #box {
        font-size: 0;
      }

      #box img {
        display: inline-block;
        width: 300px;
        height: 150px;
      }
    </style>
  </head>

  <body>
    <div id="box">
      <img
        src="https://bobbyhadz.com/images/blog/include-css-file-in-express-and-node-js/thumbnail.webp"
      />
      <img
        src="https://bobbyhadz.com/images/blog/include-css-file-in-express-and-node-js/thumbnail.webp"
      />
      <img
        src="https://bobbyhadz.com/images/blog/include-css-file-in-express-and-node-js/thumbnail.webp"
      />
    </div>
  </body>
</html>

remove whitespace between inline block elements by setting font size to 0

The code for this article is available on GitHub

Notice that we set the font-size CSS property to 0 on the wrapper div element.

style.css
#box {
  font-size: 0;
}

#box img {
  display: inline-block;
  width: 300px;
  height: 150px;
}

This removes the whitespace between the images.

Make sure to set the font-size property to 0 on the parent element and not the nested elements.

If you use this approach with elements that contain text, you have to set the font-size property on the nested elements to override the parent's value.

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <style>
      #box {
        font-size: 0;
      }

      #box p {
        display: inline-block;
        font-size: 16px;
        background-color: lightgreen;
      }
    </style>
  </head>

  <body>
    <div id="box">
      <p>bobby</p>
      <p>hadz</p>
      <p>com</p>
    </div>
  </body>
</html>

remove whitespace between elements by setting font size to 0

  1. We set the font-size CSS property on the wrapper div to 0.
style.css
#box {
  font-size: 0;
}
  1. We then set the font-size property on the child elements to 16px to override the value that gets inherited from the parent.
style.css
#box p {
  display: inline-block;
  font-size: 16px;
  background-color: lightgreen;
}

If you don't explicitly set the font-size property on the child elements, then they will inherit the value from the parent (0) and will be invisible.

# Removing the whitespace between elements by using comments

You can also use comments to remove the whitespace between elements.

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <style>
      #box p {
        display: inline-block;
        background-color: lightgreen;
      }
    </style>
  </head>

  <body>
    <div id="box">
      <p>bobby</p><!--
      --><p>hadz</p><!--
      --><p>com</p>
    </div>
  </body>
</html>

remove whitespace between elements using comments

The code for this article is available on GitHub

Notice that we start a comment on one line and finish it right before the element on the next line starts.

index.html
<body>
  <div id="box">
    <p>bobby</p><!--
    --><p>hadz</p><!--
    --><p>com</p>
  </div>
</body>

The same approach can be used to remove the whitespace between images.

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <style>
      #box img {
        display: inline-block;
        width: 300px;
        height: 150px;
        background-color: lightgreen;
      }
    </style>
  </head>

  <body>
    <div id="box">
      <img
        src="https://bobbyhadz.com/images/blog/include-css-file-in-express-and-node-js/thumbnail.webp"
      /><!--
   --><img
        src="https://bobbyhadz.com/images/blog/include-css-file-in-express-and-node-js/thumbnail.webp"
      /><!--
   --><img
        src="https://bobbyhadz.com/images/blog/include-css-file-in-express-and-node-js/thumbnail.webp"
      />
    </div>
  </body>
</html>

remove whitespace between images using comments

You can also achieve the same result by having your closing and opening tags on the same line.

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <style>
      /* #box {
        display: flex;
      } */
      #box {
        /* font-size: 0; */
      }

      #box img {
        display: inline-block;
        width: 300px;
        height: 150px;
        background-color: lightgreen;
      }
    </style>
  </head>

  <body>
    <div id="box">
      <img
        src="https://bobbyhadz.com/images/blog/include-css-file-in-express-and-node-js/thumbnail.webp"
      /><img
        src="https://bobbyhadz.com/images/blog/include-css-file-in-express-and-node-js/thumbnail.webp"
      /><img
        src="https://bobbyhadz.com/images/blog/include-css-file-in-express-and-node-js/thumbnail.webp"
      />

    </div>
  </body>
</html>
The code for this article is available on GitHub

Notice that each tag closes right before the next opening tag.

index.html
<div id="box">
  <img
    src="https://bobbyhadz.com/images/blog/include-css-file-in-express-and-node-js/thumbnail.webp"
  /><img
    src="https://bobbyhadz.com/images/blog/include-css-file-in-express-and-node-js/thumbnail.webp"
  /><img
    src="https://bobbyhadz.com/images/blog/include-css-file-in-express-and-node-js/thumbnail.webp"
  />
</div>

The same approach also works with text elements (e.g. p).

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <style>
      #box p {
        display: inline-block;
        background-color: lightgreen;
      }
    </style>
  </head>

  <body>
    <div id="box">
      <p>bobby
      </p><p>hadz
      </p><p>com</p>
    </div>
  </body>
</html>

remove whitespace between elements with opening and closing tags

However, this approach is a bit difficult to read and hacky.

Setting the display property to flex on the parent element is much more intuitive.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.
About
Contacts
Policy
Terms & Conditions
TwitterGitHubLinkedin

Copyright © 2024 Borislav Hadzhiev

0
.........
.........
.........
.........
.........
.........
.........
.........
.........
.........
.........
.........
.........
.........
.........
.........
.........
.........