How to get rid of space between divs when display inline-block and stacked horizontally?

Question

I have three divs horizontally stacked side by side to one another and these divs are set to display: inline-block. However, I have noticed that even with using some sort of CSS reset they produce a small 4px distance between each other? Why does this occur? Is there a way to globally get rid of this from happening or do I just have to shift the divs to the left -4px?

Solution 1

This is caused by the fact your browser will render the DIV's inline and as with words, they are separated by spaces.

The width of the space is determined by the font-size, hence an easy trick is to set the font-size of your containing element to 0 and then reset the font-size in your inline divs.

#container { font-size: 0; }

#container > div {font-size: 1rem; display: inline-block; }

I have demonstrated this in this Fiddle.

Take a look at this article for more info.

Solution 2

Suppose that is because of line break characters after each closing tag. Those are handled as spaces in HTML. Try to remove them. Here are few demos:

http://jsfiddle.net/eeRFC/ - with spaces

<div>test</div>
<div>test</div>
<div>test</div>

http://jsfiddle.net/eeRFC/1/ - with no spaces

<div>test
</div><div>test
</div><div>test
</div>

And common CSS:

div {
  border:solid 1px black;
  display:inline-block;
}

Solution 3

Get rid of the new line between end of the prior div and start of next div For example replace the following:

<div id="div1">
 Div Item 1
</div>
<div id="div2">
 Div Item 2
</div>

with

<div id="div1">
 Div Item 1
</div><div id="div2">
 Div Item 2
</div>

Solution 4

Using either float:left or display:inline-block would work. please refer to the working example link here.

Solution 5

You most likely have newlines between the divs in your HTML, right? If there are any separators between divs then the browser will display spaces between them.

The following example has spaces between the divs:

<style>
* {
    margin: 0;
    border: 1px solid black;
}

div {
    display: inline-block;
}
</style>

<div>
Div1
</div>

<div>
Div2
</div>

<div>
Div3
</div>

There are two methods you can use to remove the spaces between the divs. Either take away the separators between the div elements like so:

<div>
Div1
</div><div>
Div2
</div><div>
Div3
</div>

Or make your divs floating elements:

...
div {
    display: inline-block;
    float: left;
}
...

Hope that helps!

Edit:
Also see related SO question: How can I stop the new line from adding a space between my list items in HTML

View more solutions

Comments

[thomaux]

Using float and inline-block is like using two stones to kill one bird

[El Ronnoco]

Perfect, this was driving me mad!! Thanks for the explanation too. Not often CSS makes any sense to me :)

[Fred K]

Also, with float you will not able to center the elements with simple text-align

[stkmedia]

thank you for explaining this after years of not understanding it