HTML页面上不需要的白色区域

Question

我使用CSS制作了一个使用CSS的网站。

The Page The CSS

随机地在两个地方有不需要的空格：

• 主要内容区域上方（下方    菜单栏）。
• 主要内容区域下方    侧边栏和页脚上方。

我已经尝试了各种修复问题的方法，比如边距和填充，但它们似乎没有用。

我该怎样做才能摆脱这些白色区域？

Answer 1

额外的空白区域来自浏览器的默认样式表。添加以下规则：

h2 {
    margin: 0;
}

h4 {
    margin: 0;
}

要解决此问题，并防止将来出现问题，我建议使用CSS重置。 Eric Meyer's是一个被广泛推荐的人;另一个好的选择是YUI CSS Reset。

Answer 2

您需要重置css。例如，菜单栏下方的空白区域是由.maincontent h2的浏览器默认边距引起的。

就我个人而言，我更喜欢重置我使用的选择器的样式，但有一般的CSS重置，如Eric Meyer's Reset CSS。

Answer 3

你的主要内容h2和页脚h4都有边距（分别为.83em和1.33 em）将它们都设置为0

Answer 4

你有没有在IE浏览过你的CSS？

.maincontent { background: #0F3; height: 300px; width: 580px; float: left; }

基本上，您需要将float:left;添加到maincontent css

Answer 5

1。）“主页”标题的上边距为19像素。这导致19像素区域的白色空间。 2.）整个页脚的上边距为21像素。这导致21像素区域的白色空间。另外，为了解决侧栏下方的问题，解决1 + 2可能会自动解决此问题。

Answer 6

尝试将以下内容添加到样式表的顶部：

body, h1, h2, h3, p
{
margin:0;padding:0;
}

这可确保所有浏览器的默认填充/边距都设置为0，因此其一致性。然后，您可以在需要的地方添加填充/边距。