html - 页面右侧出现renundat空白的原因

Question

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

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

Answer 1

了解盒子模型

websitecontainer在您的站点中，classespackagecontainer和mecontainerall 具有以下样式规则：

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

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

请参阅下图以了解差异：

解决方案

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

 <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解决它。