CSS：下拉列表的間距問題

Question

我已經制作了一個下拉列表： http ： //jsfiddle.net/QPxVe/由於某種原因，jsFiddle正在改變jsFiddle之外不存在的對齊 - 這不是問題。

我似乎在項目之間存在差距，我無法理解為什么要添加它。

小提琴有不同的顏色和字體，但除此之外，每個都是相同的。 下圖中的箭頭指向問題 - 就像所有div一樣。 如果我為主.dropdown類設置邊距為-4px，它是固定的，但我不確定為什么空間出現在第一位......

Answer 1

這是因為display:inline-block周圍的空格（例如換行符） display:inline-block元素被渲染為空格。 解決方案之一是將父元素的font-size設置為零。

請參閱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

Marat有答案為什么空白存在。

根據您顯示的原因/需要：內聯塊，另一種解決方案可能是添加float：left; 到.dropdown規則。

喜歡這個小提琴： http ： //jsfiddle.net/QPxVe/2/