修复我网站上的div之间的奇数间距

Question

嘿，我似乎有一个CSS问题，关于我网站上<div>的间距。

如果您将浏览器指向www.marioplanet.com，您将在Apple主题导航栏后看到一个奇怪的空间。

我想知道是否有人可以帮我确定为什么要添加这个间距，以及我如何消除它，因为它是不受欢迎的。

另外，我认为它与导航栏有直接关系，因为没有导航栏，这是没有间距问题。

谢谢！

Answer 1

这是因为<a></a>

中存在<li id="gn-support"><a></a></li>

Answer 2

包含菜单栏的#globalheader DIV具有18px的垂直边距（顶部和底部）。所以接下来自然会被18px取代。

#globalheader {
height:37px;
margin:18px auto;
position:relative;
width:771px;
z-index:1;
}

Answer 3

您可能想要删除gn-ipad，gn-itunes和gn-support＆lt; li＆gt;来自你的HTML的元素。

Answer 4

去掉globalheader项中边距的18px部分，然后将globalnav项的宽度更改为1000px：

globalnav {

余量：0; 填充：0; 宽度：1000像素; }

Answer 5

好的问题与你的固定宽度有关：

#globalheader{
      width: 769px;  //this is too small and actually not needed.
}

包含的列表（#globalnav）的渲染宽度为830px（它最后有一些空白区域没有调查，看它来自何处。所以如果从globalheader中删除固定宽度并添加边距 - 离开200px到#globalnav，你将把它放在中心并摆脱空间。

此外，如果您可以看到为什么您的列表右侧有一堆空白区域，将其大小扩展到830px，您可以只执行自动保留左边距和右边距，并将列表置于全局标题div中

想出ul末尾的额外空间来自列表项的位置gn-itunes和gn-support都呈现宽度为103px的渲染。这是来自（#globalheader #globalnav LI A css规则）您可以覆盖（#globalheader #globalnav li＃gn-support A）以及（#globalheader #globalnav li＃gn-itunes A）css中的宽度规则，这也应该修复它，而不是诉诸于上面的修复。

Answer 6

如果更改globalheader的宽度将起作用。

#globalheader { height:37px; margin:auto; position:relative; width:515px; z-index:1; }

如果您想稍后添加更多导航链接，则必须增加globalheader的宽度。