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?

Answer 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.