Menu
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?
820
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.
This is because you set #DivMain to position: relative , so you created a new stacking context that is painted over the previously rendered elements.
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.
70
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
