CSS：用下拉间距问题 [英] CSS: Spacing issue with dropdown

问题描述

我有一个下拉我做： http://jsfiddle.net/QPxVe/ 出于某种原因，的jsfiddle正在改变这是不的jsfiddle之外present排列 - 这不是问题。

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.

小提琴有不同的颜色和字体，但除此之外，everyting是相同的。下面指向问题的图像中的箭头 - 这就像对于所有的div。如果我设置了保证金 -4px为主要.dropdown类，它是固定的，但我不知道为什么的空间出现在首位...

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

推荐答案

这是因为空白（如换行字符）围绕显示：inline-block的元素呈现为空间。一个解决方案是设置字体大小，父元素为零。

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.

请参阅 http://jsfiddle.net/Kb7Fp/ ，其中以下规则添加：

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

BODY > DIV {font-size: 0; }

这篇关于CSS：用下拉间距问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！