CSS: the problem with the dropdown
I have a dropdown menu that I made: http://jsfiddle.net/QPxVe/ For some reason jsFiddle changes the alignment that is missing outside the jsFiddle - this is not a problem.
I seem to have a gap between elements and I don't understand why it is being added.
The Fiddle has different colors and fonts, but other than that, each one is identical. The arrow in the image below indicates the problem - it is similar for all divs. If I set -4px for the main .dropdown class it gets fixed, but I'm not sure why the space appears in the first place ...
This is because spaces (like newlines) around the element display:inline-block
appear as space. One solution is to set the font size for the parent element to zero.
See http://jsfiddle.net/Kb7Fp/ where the following rule is added:
BODY > DIV {font-size: 0; }
This is because of the spaces (as Marat said).
Another solution (which I found more convenient) is to comment out the line break like this:
<div class="dropdown"><span>Rice cakes</span></div><!--
--><div class="dropdown"><span>Enemies</span>
You can see the result here: http://jsfiddle.net/EfQdX/
Marat has an answer as to why there are gaps here.
Depending on your reasons / needs for displaying: inline-block, another solution might be to add float: left; to the .dropdown rule.
As in this fiddle: http://jsfiddle.net/QPxVe/2/