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

我已经使用从头开始制作的CSS制作了一个网站。页面CSS 随机地在两个地方有不需要的空格：主要内容区域上方（下方菜单栏）。主要内容区域下方和侧边栏和页脚上方。我已经尝试了各种修复问题的方法，如边距和填充，但它们似乎没有用。我该怎么做才能摆脱这些白色区域？

已邀请:

6 个回复

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

h2 {
    margin: 0;
}

h4 {
    margin: 0;
}

为了解决这个问题，并防止将来出现这种问题，我建议使用CSS重置。 Eric Meyer是一个广受推荐的人;另一个不错的选择是YUI CSS重置。

你需要重置css。例如，菜单栏下方的空白区域是由.maincontent h2的浏览器默认边距引起的。就个人而言，我更喜欢重置我使用的选择器的样式，但有一些常见的css重置，如Eric Meyer的重置CSS。

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

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

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

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

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

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

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

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

要回复问题请先登录或注册