2

I've got a dropdown I've made: http://jsfiddle.net/QPxVe/ For some reason, jsFiddle is altering the alignment which is not present outside of jsFiddle - this is not the issue.

I seem to have a gap between items and I cannot see why it is being added.

The Fiddle has different colours and fonts, but other than that, everyting is identical. The arrow in the image below points to the problem - it is like that for all the divs. If I set the margin to -4px for the main .dropdown class, it is fixed but I'm not sure why the space is appearing in the first place...

enter image description here

Alex Guerin
  • 2,336
  • 10
  • 36
  • 53

3 Answers3

7

It's because whitespace (e.g. new-line characters) around display:inline-block element is rendered as space. One of solutions is to set font-size for parent element to zero.

See http://jsfiddle.net/Kb7Fp/ where following rule is added:

BODY > DIV {font-size: 0; }
Marat Tanalin
  • 13,927
  • 1
  • 36
  • 52
1

It is because of the whitespace (as Marat said).

Another solution (that I found more convenient) is to comment the line break like that:

<div class="dropdown"><span>Rice cakes</span></div><!--
--><div class="dropdown"><span>Enemies</span>

You can see the result here: http://jsfiddle.net/EfQdX/

TimPetricola
  • 1,491
  • 2
  • 12
  • 24
0

Marat has the answer as to why the whitespace is there.

Depending on your reasons/needs for display: inline-block, another solution could be to add float: left; to the .dropdown rule.

Like on this fiddle: http://jsfiddle.net/QPxVe/2/

keithwyland
  • 2,998
  • 1
  • 17
  • 22