如何摆脱页面顶部/底部的空白间距？答案

【问题标题】：How can I get rid of the white spacing at the top/bottom of my page?如何摆脱页面顶部/底部的空白间距？
【发布时间】：2013-01-31 06:43:51
【问题描述】：

我正在尝试删除我正在处理的布局的顶部间距，您可以在此处查看：50.116.81.173/~speedcit/wordpress/。但是，我似乎没有太多运气。我基本上想删除页面顶部的白色间距。

以下是我目前使用的 CSS 代码：

body, html {
    font-family: Arial;
    font-size: 11.5pt;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
}

table, tr, td, div {
    font-family: Arial;
    font-size: 11.5pt;
}

#outer {
    text-align: center;
    margin: 0px;
}

#wrapper {
    border-left: 1px #000000 dotted;
    border-right: 1px #000000 dotted;
    padding-top: 2px;
    padding-left: 2px;
    text-align: left;
    width: 1024px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    min-height: 100%;
}

#header {
    background-image: url(http://50.116.81.173/~speedcit/images/header.jpg);
    width: 1024px;
    height: 280px;
}

#menu {
    width: 1024px;
    height: 61px;
}

#content {
    background-image: url(http://50.116.81.173/~speedcit/images/content-bg.jpg);
    background-repeat: no-repeat;
    width: 804px;
    height: 357px;
    padding-top: 80px;
    padding-bottom: 10px;
    padding-left: 110px;
    padding-right: 110px;
    line-height: 24pt;
}

#footer {
    margin: 0px;
    padding: 0px;
}

.txt {
    color: #BF2736;
    font-weight: bold;
}

【问题讨论】：

标签： css whitespace spacing

【解决方案1】：

将填充 0 添加到您的包装器。 CSS 重置应该可以解决您的问题，但可能会创建新问题。 http://meyerweb.com/eric/tools/css/reset/

#wrapper {padding:0;}

问题的根本原因是您没有将浏览器呈现 CSS 的方式重置为零。

【讨论】：

我刚做了这个，但由于某种原因我仍然得到空间。
可能还有其他需要将填充和边距设置为零的东西。
你指的还有什么其他空白？
我在 IE9 中看不到它。你用的是什么版本的IE？
看起来像是 WordPress 设置在顶部的管理面板。现在我觉得很好！

【解决方案2】：

将#wrapper 的填充更改为零

#wrapper {
    border-left: 1px #000000 dotted;
    border-right: 1px #000000 dotted;
    padding-top: 0px; -- Change This to zero!!!
    padding-left: 2px;
    text-align: left;
    width: 1024px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    min-height: 100%;
}

您可能想了解 CSS 重置工具

http://meyerweb.com/eric/tools/css/reset/

重置样式表的目的是减少浏览器在诸如默认行高、页边距和标题字体大小之类的东西，等等

【讨论】：

我刚刚设置了 padding: 0 和 margin: 0 ，但不幸的是仍然得到了间距......而且我已经应用了 css 重置工具。
您在看哪个浏览器？因为我正在使用 chrome 查看您的网站，但在页面顶部看不到空间
我用IE 7,8,9,10检查了你的网站，顶部没有空格确定你清除了缓存吗？
wikihow.com/Clear-Your-Browser's-Cache#Internet_Explorer_8 按照此说明清除缓存...
现在我感觉很愚蠢...这是因为“admin cp”已启用，所以我正在查看 WordPress 放置的管理工具栏的间距。感谢您的帮助！！！

【解决方案3】：

在#wrapper 规则中将 padding-top:2px 替换为 padding:0。如果在 padding-top 属性前加上 padding:0 还是会有问题的。

【讨论】：

【解决方案4】：

底部填充的问题是图像本身。图像中有一个空白区域。编辑并删除它： 50.116.81.173/~speedcit/images/footer.jpg

你的顶部空白的问题是其他人之前所说的。

【讨论】：

@Omar ，我可以看到您更改了 CSS 规则，这解决了您的顶部空白，但您的底部图像文件仍然相同。您必须使用 Paint 或 Photoshop 等程序对其进行编辑，并从中删除不需要的空间。