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

【问题标题】：Fixing odd spacing between divs on my site修复我网站上 div 之间的奇数间距
【发布时间】：2010-08-05 03:44:19
【问题描述】：

嘿，我的网站上<div>s 的间距似乎存在 CSS 问题。

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

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

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

谢谢！

【问题讨论】：

标签： css html spacing

【解决方案1】：

这是因为<a></a>出现在<li id="gn-support"><a></a></li>中

【讨论】：

在一定程度上和 Paul 的一样，但它仍然在导航栏和下面的 div 之间留下了一点空间，并且它消除了我的 PNG 图像的其他背景部分。
@BOSS: 剩下的来自body背景，试试把这个从body去掉 css:background-color:#666666
嗯，是的，我不介意背景的颜色，如果你明白我的意思，我只是不想显示那条背景。更改会影响整个背景颜色。
@BOSS：不管你删除与否，我只是告诉你它发生的原因:)
:D 但是，这不是我的问题，不是吗？我正在尝试解决让背景条将导航栏与我的以下
分开的问题。我正在尝试解决为什么会出现的问题。

【解决方案2】：

包含菜单栏的#globalheader DIV 具有 18px 的垂直边距（顶部和底部）。所以很自然地，接下来的内容被移动了 18px。

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

【讨论】：

太好了，这有助于我的徽标和导航栏之间的间距，但我的导航栏和它下面的页面其余部分之间仍然有这个间距。
正如我在下面提到的，按照 Robusto 所说的做，然后调整 globalnav CSS 列表的宽度...

【解决方案3】：

您可能希望从 html 中删除 gn-ipad、gn-itunes 和 gn-support

元素。

【讨论】：

嗯，这可以消除几乎所有的间距，但是，我似乎无法理解为什么它会删除我的 PNG 图像的最后一个空白背景部分，用于导航栏。有没有可能我可以将那些
变成一个
，然后将其正确格式化为不会留下任何空间但也会保持背景部分完整的位置？

【解决方案4】：

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

全球导航 {

边距：0；填充：0；宽度：1000px； }

【讨论】：

【解决方案5】：

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

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

包含的列表 (#globalnav) 的渲染宽度为 830 像素（它最后有一些空白没有调查它来自哪里。所以如果你从 globalheader 中删除固定宽度并添加一个边距 -在 #globalnav 的 200px 左侧，您将其居中并摆脱空间。

此外，如果您可以看到为什么您的列表右侧有一堆空白将其大小扩展到 830 像素，您可以执行 auto 的 margin-left 和 margin-right 并将列表居中在全局标题 div 中.

找出 ul 末尾的额外空间来自列表项的位置 gn-itunes 和 gn-support 都以 103px 的宽度呈现。这是来自 (#globalheader #globalnav LI A css rule) 您可以覆盖 (#globalheader #globalnav li#gn-support A) 以及 (#globalheader #globalnav li#gn-itunes A) css 中的宽度规则，这也应该解决它，而无需求助于上面的修复。

【讨论】：

【解决方案6】：

如果你改变 globalheader 的宽度就可以了。

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

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

【讨论】：