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

enter image description here


source to share

3 answers

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/



All Articles