页面右侧的rendundat空格的原因

Question

在我的网站上，我的页面右侧有空格，但页面中的所有宽度都设置为100％，包括页面的颜色。因此，即使有一个宽度延伸到页面之外，该部分应该与其余部分颜色相同。

我正在使用一个基于锚点的网站，如果你看一下http://www.jeremyspence.net78.net/，你可以看到只有第一个锚点侧面有空白，但是一直有一些额外的空间（明显）。我不想要空白或额外的空间，但空白是令人困惑的。是的，我有margin: 0;和padding: 0;

Answer 1

了解盒子模型

在您的网站中，类websitecontainer，packagecontainer和mecontainer都具有以下样式规则：

...
width:100%;
padding:50px;
...

这实际上意味着它们应该跨越容器的整个宽度（在这种情况下为主体），然后浏览器应在该宽度周围添加 50px的填充。这是根据现代浏览器使用的W3C standard box-model的方式。在IE的过时版本中，盒子模型将按照当前在页面中设置的方式工作，并且填充将从宽度减去。

请参阅下图以了解其中的区别：

解决方案

直接的解决方案是从这些容器中移除衬垫，消除额外的宽度和冗余间距。如果需要填充，则可以简单地将当前容器的内容包装在另一个容器中，并将填充应用于此新的内部容器。例如：

 <div class="some-container">
     <div class="inner-container">
          <!--Content goes here as before-->
     </div>
 </div>

现在样式规则是：

 .some-container {width:100%;}
 .inner-container {padding:50px;}

Answer 2

使用此

替换这些样式的当前CSS代码

.websitescontainer {
    width: 100%;
    height: 1080px;
    background: #cefece;
}
.packagescontainer {
    width: 100%;
    height: 1080px;
    background: #cefefe;
}
.mecontainer {
    width: 100%;
    height: 1080px;
    background: #fecefe;
}

注意：您可以这样编写此代码

.websitescontainer, .packagescontainer, .mecontainer{
    width: 100%;
    height: 1080px;
    background: #cefece;
}
.mecontainer {
    background: #fecefe;
}

Answer 3

你的CSS：

.homecontainer {
    background:#ffe6ce;
    width: 100%;
    height: 1080px;
    padding-top:50px;
}

应该是：

.homecontainer {
    background:#ffe6ce;
    width: 100%;
    height: 1080px;
    padding: 50px 0 0 0;
    margin: 0;
}

注意添加margin并将padding的重新加工为速记格式，基本上从顶部顺时针运行：50px（上）0（右）0（下）0（左）

Answer 4

看起来像是删除

padding: 50px;

来自.mecontainer的

解决了这个问题。