Why is there an unexplainable gap between these inline-block div elements?

css, html, margin, padding

Solution

In this instance, your `div` elements have been changed from `block` level elements to `inline` elements. A typical characteristic of `inline` elements is that they respect the whitespace in the markup. This explains why a gap of space is generated between the elements. (example)

There are a few solutions that can be used to solve this.

Method 1 - Remove the whitespace from the markup

Example 1 - Comment the whitespace out: (example)

<div>text</div><!--
--><div>text</div><!--
--><div>text</div><!--
--><div>text</div><!--
--><div>text</div>

Example 2 - Remove the line breaks: (example)

<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>

Example 3 - Close part of the tag on the next line (example)

<div>text</div
><div>text</div
><div>text</div
><div>text</div
><div>text</div>

Example 4 - Close the entire tag on the next line: (example)

<div>text
</div><div>text
</div><div>text
</div><div>text
</div><div>text
</div>

Method 2 - Reset the `font-size`

Since the whitespace between the `inline` elements is determined by the `font-size`, you could simply reset the `font-size` to `0`, and thus remove the space between the elements.

Just set `font-size: 0` on the parent elements, and then declare a new `font-size` for the children elements. This works, as demonstrated here (example)

#parent {
    font-size: 0;
}

#child {
    font-size: 16px;
}

This method works pretty well, as it doesn't require a change in the markup; however, it doesn't work if the child element's `font-size` is declared using `em` units. I would therefore recommend removing the whitespace from the markup, or alternatively floating the elements and thus avoiding the space generated by `inline` elements.

Method 3 - Set the parent element to `display: flex`

In some cases, you can also set the `display` of the parent element to `flex`. (example)

This effectively removes the spaces between the elements in supported browsers. Don't forget to add appropriate vendor prefixes for additional support.

.parent {
    display: flex;
}
.parent > div {
    display: inline-block;
    padding: 1em;
    border: 2px solid #f00;
}

.parent {
    display: flex;
}
.parent > div {
    display: inline-block;
    padding: 1em;
    border: 2px solid #f00;
}

<div class="parent">
    <div>text</div>
    <div>text</div>
    <div>text</div>
    <div>text</div>
    <div>text</div>
</div>

Sides notes:

It is incredibly unreliable to use negative margins to remove the space between `inline` elements. Please don't use negative margins if there are other, more optimal, solutions.

Problem

Original source

Related problems

• How do I remove extra margin space generated by inline blocks?
• How to remove the space between inline/inline-block elements?
• How to remove the space between inline/inline-block elements?