页面右侧出现rendundat空白的原因[关闭]答案

【问题标题】：Cause of rendundat whitespace on the right of a page [closed]页面右侧出现rendundat空白的原因[关闭]
【发布时间】：2013-01-11 05:24:27
【问题描述】：

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

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

【问题讨论】：

请在此处包含相关代码，而不是链接到外部站点。如果外部网站发生变化或消失，这个问题就会失去上下文并变得无用。
快速查看您的页面源代码给出了这一点。从 .mecontainer 类中删除 width: 100% 似乎可以解决它。即使没有为它设置明确的宽度，它仍然以某种方式比其他宽度更宽。希望对您有所帮助。

标签： html css width whitespace padding

【解决方案1】：

了解盒子模型

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

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

这实际上意味着它们应该跨越其容器的整个宽度（在本例中为主体），然后浏览器应该在该宽度周围添加 50px 的填充。根据现代浏览器使用的W3C standard box-model，这是应该的方式。在过时的 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;}

【讨论】：

那不正确，我不认为。 “填充”来自元素“内部”。所以它不会影响外围。
您也可以考虑使用box-sizing: border-box;，以便将padding 和border 包含在计算的宽度中。
@mavili 不正确。除非使用 box-sizing 属性以这种方式设置，否则宽度中不包含填充。 developer.mozilla.org/en-US/docs/CSS/box-sizing
删除填充工作非常感谢您

【解决方案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;
}

【讨论】：

哇，小心!important。如果你不小心，那会与其他 CSS 样式混淆。
使用星形选择器将所有填充设置为0 不是一个好的解决方案。问题是在某些div 容器上设置了填充。
好的，我已经编辑了我的答案

【解决方案3】：

好像去掉了

padding: 50px;

来自.mecontainer 解决了它。

【讨论】：

@downvoter 当您在不评论您的原因的情况下投反对票时，它是如此无益。是不是太费劲了？

【解决方案4】：

你的 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（左侧）

【讨论】：