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

Question

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

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

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

Answer 1

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

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

BODY > DIV {font-size: 0; } 

Answer 2

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

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

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

Answer 3

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

Другое решение (что я нашел более удобным), чтобы прокомментировать разрыв строки вроде этого:

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

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