Why Are There Spaces or Gap Between Elements

Have you ever tried creating something like a grid of boxes with a few inline-block elements? If you ever tried doing it or something similar then there's a chance you have came across a problem and that's mysterious space between the elements.

Normally with spaces/gaps.

You might have even tried setting the margin to 0 without any positive results. The spaces between those elements are just some characters left in your markup. Which character? Probably line breaks, that's the most common one, whereas there could me any other special character which causes the irritating unwanted space between the elements.

Why Does It Happen?

You must know that every character inherits the font size of the parent so does those characters i.e line breaks and that's why we get those space.

The most straight forward answer is to set the font size to zero and tada! the spaces are gone.

Anyways I will tell you different ways to do it including the zero size font technique.

Setting Font Size to Zero

That'd eliminate any spacing caused by any characters that has been set to size zero and thus the spacing between the boxes caused by the line break characters will be gone.

This is our HTML markup:

<div class='boxes'>
    <div class='box'><span>1</span></div>
    <div class='box'><span>2</span></div>
    <div class='box'><span>3</span></div>
    <div class='box'><span>4</span></div>
    <div class='box'><span>5</span></div>
    <div class='box'><span>6</span></div>
    <div class='box'><span>7</span></div>
    <div class='box'><span>8</span></div>
</div>

And the CSS code with some basic styling for the boxes would be this

.boxes {
  font-size:0;
}

.boxes .box span {
  font-size:initial; /* Required to make the texts size inside the container normal or the initial value */
}

Note: We added the font-size:initial; for the inner span elements so that the text inside the box retain their initial font size instead of inhering its parent's font size which is zero and would make it non-readable.

If changing font size is not something you are comfortable with then you must try a different approach which is a lot simpler. Move to the other option.

Removing The Line Breaks

Instead of setting the font size to zero why don't we just remove the cause itself? That's simpler and very easy approach. You just inline the code so that no line breaks or empty spaces are between the markup of each elements, here's a code demo.

<div class='boxes'>
    <div class='box'>1</div><div class='box'>2</div><div class='box'>3</div><div class='box'>4</div><div class='box'>5</div><div class='box'>6</div><div class='box'>7</div><div class='box'>8</div>
</div>

If you are a person who loves to keep their HTML markup readable and indented beautifully then this surely isn't for you, you must try the first one.

Download Demo

I prepared a detailed demonstration on the topic.
Download Demo

Further read

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