Question

我正在尝试删除我正在处理的布局的顶部间距，您可以在此处查看：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;
}

Answer 1

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

#wrapper {padding:0;}

问题的根本原因是您没有重置浏览器将CSS渲染回零的方式。

Answer 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/

重置样式表的目标是减少浏览器中的浏览器不一致性默认行高，标题的边距和字体大小等内容，等等

Answer 3

在#wrapper规则中替换padding-top：2px with padding：0。如果在padding-top属性之前添加padding：0，则仍然会出现问题。

Answer 4

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

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

如何摆脱页面顶部/底部的白色间距？

4 个答案: