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

Answer 1

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>

Answer 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;
}

Answer 3

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.

Answer 4

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

Answer 5

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