Question

目前我正在使用Twitter Bootstrap创建一个小型网站。我已经在导航栏下面创建了一个导航栏和一些内容，所以直到现在我的背景都是白色的，就像导航栏的背景一样，所以一切都还可以。

然而，今天我将身体的背景改为lighblue（仅用于测试）并注意到导航栏和身体之间存在间隙。所以我搜索了几个小时以获得了一些余量，但我找不到任何余量。

这是一个jsfiddle，你可以看到我要删除的白色间隙。 http://jsfiddle.net/qwm6ku9x/

一个丑陋的解决方法是将我赋予id“nav-content”的元素的高度设置为hardcoced值。在此示例中，“width: 100px !important;”可以正常工作。

但是我感兴趣的是为什么会出现这种差距。

如果有一些webguru可以向我解释这种行为，我会非常高兴。

Answer 1

当你使用display: inline-block;时，HTML中的空格会成为屏幕上的可视空间，并且有一些解决方案可以删除你的空白区域。 - David Walsh

解决方案1：将display: inline-block;移至ul标记。 - DEMO 1

ul {
    /* display: inline-block; */
}

解决方案2：将display: block;应用于您的ul代码。 - DEMO 2

ul {
   display: block;
}

解决方案3：将vertical-align: middle;或top或bottom应用于您的ul标记。 - DEMO 3

ul {
   display: inline-block;
   vertical-align: middle;
}

有关更多解决方案：

Fighting the Space Between Inline Block Elements - 克里斯 Coyier