WebLayout中无序列表下的Magic Gap [英] Magic Gap below unordered list in WebLayout

问题描述

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

然而，今天我改变了我的身体的背景为lighblue（只是为了测试），注意到导航栏和身体之间的差距。所以我搜索了几个小时，我已经设置了一些保证金，但我不能找到任何。

这里是一个jsfiddle，你可以看到我想要的白色差距去掉。
http://jsfiddle.net/qwm6ku9x/

一个丑陋的解决方法是设置元素的高度，我给idnav-content一个hardcoced值。
在这个例子中， width：100px！important; 可以工作。

解决方案

当使用 display：inline-block; 是HTML中的空格变成屏幕上的可视空间，在你的情况下的空白。 - David Walsh

解决方案1：将显示：inline-block; 移至 ul - DEMO 1

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

解决方案2： $ c> display：block; 到您的 ul 标记。 - DEMO 2

  ul {
 display：block; 
} 
  

解决方案3： > vertical-align：middle; 或顶部或底部 c> ul 标记。 - DEMO 3

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

有关更多解决方案： b
$ b

消除内嵌块元素之间的空间 - 作者Chris
Coyier

Currently i am creating a small website with Twitter Bootstrap. I already created a navbar and some contentent below that navbar, so until now my background was white, as was the background of the navbar, so everything was ok.

However, today I changed the background of my body to lighblue(just for the test) and noticed a gap between the navbar and the body. So I searched for hours for some margin i had set, but i couldn´t find any.

Here is a jsfiddle where you can see the white gap which I want to remove. http://jsfiddle.net/qwm6ku9x/

One ugly workaround is to set the height of the element I gave the id "nav-content" to a hardcoced value. In this example "width: 100px !important;" would work.

However I am interested WHY this gap appears.

I would be very happy if some webguru could explain this behaviour to me.

解决方案

When you use display: inline-block; is that whitespace in HTML becomes visual space on screen and there are a few solutions to remove that whitespace in your case. - by David Walsh

Solution 1: remove display: inline-block; to your ul tag. - DEMO 1

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

Solution 2: apply display: block; to your ul tag. - DEMO 2

ul {
   display: block;
}

Solution 3: apply vertical-align: middle; or top or bottom to your ul tag. - DEMO 3

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

For more solutions:

Fighting the Space Between Inline Block Elements - by Chris Coyier

这篇关于WebLayout中无序列表下的Magic Gap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！