Inline-Block without margins? - css

Question

I have several DIV's displayed as inline-blocks; and they seem to be getting spacing automatically applied in between them from the browser. They have margin/padding set to 0. Is there a way to correct this without using negative margins?

Answer 1

Sam, that space you're seeing is actually whitespace. That's why removing the paddings and margins does nothing. Let me explain. When you have this:
HTML
<div>
a
a
a
a
</div>
this is how it's rendered:
a a a a
...right?
So, if you have this:
<div>
<div style="display:inline-block"></div>
<div style="display:inline-block"></div>
<div style="display:inline-block"></div>
</div>
...you'll get the same thing:
block [space] block [space] block
Now... there are many different solutions to this problem. I believe the most common is commenting out the whitespace in the html:
<div>
<div style="display:inline-block"></div><!--
--><div style="display:inline-block"></div><!--
--><div style="display:inline-block"></div>
</div>
I don't like it though - I prefer keeping the html as clean as possible. My preferred way is to set the parent's font-size to 0, and then set back the desired font-size on the inline-blocks themselves. Like so:
div {
font-size: 0; /* removes the whitespace */
}
div div {
display: inline-block;
font-size: 14px;
}

Answer 2

You don't need to use negative margins to offset the original margins.
Instead you can override them with the following:
* { margin:0; }
or:
.div { margin:0; }
if it's element specific.
EDIT:
It appears the problem may be a result of unintended whitespace. For instance:
<div style="display:inline-block">
...
</div>
<div style="display:inline-block">
...
</div>
There exists white space between the two dividers and the browser will print the white space as a result. To fix this, you'll need to change it to:
<div style="display:inline-block">
...
</div><div style="display:inline-block">
...
</div>
Enjoy and good luck!

Answer 3

You can use both display: inline-block and float: left to remove that space.
Here goes plunkr: https://plnkr.co/edit/Sn3NG77asiXO8UrrpxWD?p=preview

Answer 4

Inline-block is originally a IE6 hack
This is what its used for:
To fix the IE6 double-margin bug on floated elements
To place multiple block-like elements on the same horizontal line
without floating them(if you can't float 'exceptional cases)
To allow an inline element to have width and/or height while still
remaining inline
To allow an inline element to have padding or margins
So if you wanna have multiple divs beside eachother please use float, its gonna solve many of your css problems that inline-block can cause, especially cross browser issues
More about inline-block here arcticle 9.2.4
Best regards
SP
please comment if disagree

Answer 5

Another way I have found the method altering the word-spacing on the parent container works for me https://jsfiddle.net/1ex5gpo3/2/
.parent {
word-spacing: -1em;
}
.child {
word-spacing: normal;
display: inline-block;
}