CSS: проблема пробелов с выпадающим

Question

У меня есть выпадающий список: http://jsfiddle.net/QPxVe/ По какой-то причине jsFiddle изменяет выравнивание, которого нет за пределами jsFiddle - это не проблема.

Iкажется, что между элементами есть разрыв, и я не могу понять, почему он добавляется.

Скрипка имеет разные цвета и шрифты, но в остальном все одинаково.Стрелка на изображении ниже указывает на проблему - это так для всех div.Если я установлю поле на -4px для основного класса .dropdown, оно будет исправлено, но я не уверен, почему пробел появляется в первую очередь ...

Answer 1

Это потому, что пробел (например, символы новой строки) вокруг элемента display:inline-block отображается как пробел. Одно из решений - установить нулевой размер шрифта для родительского элемента.

См. http://jsfiddle.net/Kb7Fp/, где добавлено следующее правило:

BODY > DIV {font-size: 0; }

Answer 2

Это из-за пробелов (как сказал Марат).

Другое решение (которое мне показалось более удобным) - прокомментировать разрыв строки следующим образом:

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

Вы можетесмотрите результат здесь: http://jsfiddle.net/EfQdX/

Answer 3

У Марата есть ответ на вопрос, почему есть пробел.

В зависимости от ваших причин / потребностей для отображения: inline-block, другое решение может заключаться в добавлении float: left; к правилу .dropdown.

Как на этой скрипке: http://jsfiddle.net/QPxVe/2/